Question

我想做什么：正如标题中所述，我想设置一个单词的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);
        }
    });
});

<小时/> 问题：我已经提到了几种方法的文档（在下面的参考文献部分中），但我不太确定问题出在哪里。为了缩小问题范围，我的问题将是......

.split()甚至是jQuery中的方法吗？
我应该使用for循环来遍历数组中的所有单词（以查看代码是否包含保留字）或者是否有更好的方法（例如.each()）？< / LI>
如果我应该使用.each()，有人可以给我一个简单的例子吗？我不明白文档中的例子。

参考

Answer 1

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

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

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

value要搜索的值。

通过其搜索的arrayAn数组。

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(' '));
});

Answer 2

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

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();
            }
        })
    }
}

它无法“撤消”关键字换行，但它符合我的需要。

如果您需要一个示例如何实现这一点，我很乐意制作一个如果您提供一些文本我可以测试它....

在包含保留字时设置CSS代码

2 个答案: