我想做什么:如标题所述,我想设置一个单词的 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 ()
)? - 如果我应该使用
.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.
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/