当代码包含保留字时，设置代码的CSS

Set CSS of code when it contains reserved words

本文关键字：代码 设置 CSS 包含 保留字      更新时间：2023-09-26

我要做的事情：正如标题中所述，如果一个单词是保留单词，我想设置它的CSS。

HTML

<html>
    <body>
        <code id="java">
            public static void main(String[] args)<br>
            {
                <pre>    System.out.println("Hello World!");</pre>
            }
        </code>
    </body>
</html>

jQuery

$(document).ready(function()
{
    // Get the text inside the code tags
    var code  = $("#java").text();
    // Split up each word
    var split = code.split(' ');
    // Array of reserved words
    var array = ["abstract","assert","boolean","break","byte","case",
                 "catch","char","class","const","continue","default",
                 "do","double","else","else if","enum","extends","final",
                 "finally","float","for","goto","if","import","implements",
                 "instanceof","int","interface","long","native","new","null",
                 "package","private","protected","public","return","short",
                 "static","strictfp","super","switch","synchronized","this",
                 "throw","throws","transient","void","volatile","while"];
    // Added when text contains a reserved word
    var css = {'font-weight':'bold','color':'#2400D9'}
    array = jQuery.map(array, function(n,i)
    {
        for (int j=0; j<array.length; j++)
        {
            if (split[i].contains(array[j]))
                split[i].css(css);
        }
    });
});

问题：我已经参考了一些方法的文档（在下面的参考部分），但我不太确定问题在哪里。为了缩小问题范围，我的问题是…

  1. .split()甚至是jQuery中的一个方法吗
  2. 我应该使用for循环来遍历数组中的所有字（查看代码是否包含保留字），还是有更好的方法（如.each()）
  3. 如果我应该使用.each()，有人能给我一个简单的例子吗？我不理解文档中的示例

参考

  • jQuery中的.split()
  • .map()
  • .each()

如果我理解正确，您可以使用$.inArray并用span标记包装保留字来实现您想要的内容。查看我的演示

编辑：以下来自jQuery$.inArray文档。

$.inArray( value, array [, fromIndex] )-

value要搜索的值。

array要搜索的数组。

fromIndex开始搜索的数组的索引。这个默认值为0，它将搜索整个数组。

阅读更多。。

CSS

.code {
    font-weight: bold;
    color: #2400D9;
}

JS

$(document).ready(function() {
    // Get the text inside the code tags
    var code = $("#java").html();
    // Split up each word
    var split = code.split(' ');
    // Array of reserved words
    var array = ["abstract", "assert", "boolean", "break", "byte", "case", "catch", "char", "class", "const", "continue", "default", "do", "double", "else", "else if", "enum", "extends", "final", "finally", "float", "for", "goto", "if", "import", "implements", "instanceof", "int", "interface", "long", "native", "new", "null", "package", "private", "protected", "public", "return", "short", "static", "strictfp", "super", "switch", "synchronized", "this", "throw", "throws", "transient", "void", "volatile", "while"];
    for (var j = 0; j < split.length; j++) {
        if ($.inArray(split[j], array) > 0) {
            split[j] = '<span class="code">' + split[j] + '</span>';
        }
    }
    $("#java").html(split.join(' '));
});

几个月前我问自己这个问题，经过大量搜索，我发现了这个：

http://forum.jquery.com/topic/wrapping-specific-words-inside-span-elements#14737000001028912

我将其添加到以下jQuery插件中：

$.fn.applyKeyword = function(opt, selector) {
    var numOfKeys = opt.keys.length;
    if (typeof selector == 'undefined') {
        selector = ":visible:not(:input):not(label):not(select)";
    }
    for (var i = 0; i < numOfKeys; i++) {
        if (opt.keys[i].partials) {
            var re = new RegExp("(" + opt.keys[i].keyword + ")", 'ig');
        } else {
            var re = new RegExp("(''b" + opt.keys[i].keyword + "''b)", 'ig');
        }
        $(selector, this).contents().filter(function() {
            return this.nodeType != 1;
        }).each(function() {
            var output = $(this).text().replace(re, opt.keys[i].prefix + "$1" + opt.keys[i].suffix);
            if (output != $(this).text()) {
                $(this).wrap("<p></p>").parent('p').html(output).contents().unwrap();
            }
        })
    }
}

它没有"撤消"关键字包装的方法，但它符合我的需求。

如果你需要一个如何实现这一点的例子，如果你提供一些文本，我很乐意做一个例子，我可以在上面测试…

相关文章：