javascript - 设置包含保留字的代码CSS

标签 javascript jquery html css reserved-words

我想做什么:如标题所述,我想设置一个单词的 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(),有人可以给我一个简单的例子吗?我不理解文档中的示例。


引用文献

最佳答案

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

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

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

valueThe value to search for.

arrayAn array through which to search.

fromIndexThe index of the array at which to begin the search. The default is 0, which will search the whole array.

..read more..

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

关于javascript - 设置包含保留字的代码CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9744630/

相关文章:

javascript - 自定义 HTML5 表单验证最初不显示自定义错误

javascript - 使用 Underscorejs 从 json 中提取值

javascript - CSS 动画 webkit 变换 旋转 : why start from 0 all the time

javascript - 如何获取 jQuery datePicker 的多月插件来加载已选择的某些日期?

javascript - 倒带 CSS 动画

javascript - 将坐标转换为以像素为单位的 CSS 固定定位

javascript - 通过 package-lock.json 减轻差异噪音

javascript - 没有拉伸(stretch)或溢出的图像宽度和高度

javascript - 如何获取 DOM 元素(也是嵌套的)相对于 body 的位置?

javascript - 根据单选按钮选择更改值和链接