Question

我有这个jQuery片段，我已经存储了变量来突出显示它们。

    var words= ['Sample','count'];
    var keywords = ['import','public','class','static','void','for','if','else'];
    $(document).ready(function() {
    if (#showVariables).click(function(){
        var wordsHtml = $('#identifier').html();
        $.each(words, function(idx, word) {
        var reg = new RegExp(word, 'g');
        wordsHtml = wordsHtml.replace(reg, '<span class="highlight">' + word + '</span>');
        })
        $('#identifier').html(wordsHtml);
    });


});

这是可能有帮助的HTML，

<div id="menuDiv"><span id="showVariables" class="button">Variables</span><span id="showKeywords" class="button">Keywords</span></div>
<div id="codeDiv">
<br><span class="keyword">import</span> java.io.*;
<br>
<br><span class="keyword">public</span> <span class="keyword">class</span> <span class="identifier">Sample</span> {

<br>&nbsp;&nbsp;<span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> main(String args[]) {
<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>int</span> <span class="identifier">count</span> = 0;

我正在尝试突出显示关键字和标识符。我哪里错了？

Answer 1

问题是没有“if click”并且选择器的语法也错误 - 缺少引号

缺少更好的术语的“if”仅在用户点击

时才会发生

变化：

if (#showVariables).click(function(){

到

$('#showVariables').click(function(){

编辑：重新编码以将各种数组传递给相同的高亮功能。演示使用数组“单词”和“关键字”

DEMO：http://fiddle.jshell.net/dxPhK/

保留字'class'被置于正则表达式中仍然是一个小问题

var words = ['Sample', 'count'];
var keywords = ['import', 'public', /*'class',*/ 'static', 'void', 'for', 'if', 'else'];
$(document).ready(function() {
    $('#showVariables').click(function() {
        $('.identifier').each(function(idx, el) {
            var $el=$(el)
            $el.html(hightLightHtml($el.html(), words, 'red'));
        })
    });
    $('#showKeywords').click(function() {
        $('.keyword').each(function(idx, el) {
           // console.log(idx)
            var $el=$(el)
            $el.html(hightLightHtml($el.html(), keywords, 'yellow'));
        })
    });


});


function hightLightHtml(wordsHtml, wordsArray, highlightClass) {
    $.each(wordsArray, function(idx, word) {
        var reg = new RegExp(word, 'g');
        wordsHtml = wordsHtml.replace(reg, '<span class="' + highlightClass + '" >' + word + '</span>');
    })
    return wordsHtml;
}

Answer 2

演示 http://fiddle.jshell.net/rG6F9/13/（点击varaibles文字，您会看到HTML警报之前和之后。

突出显示在这里可以正常工作：http://fiddle.jshell.net/8axss/20/（我已经清理了你的HTML以及脚本）

Hiya，多件事情都不正确：

1）$('#showVariables').click(function()

2）.identifier是一个类，因此请使用.。

3）identifier应该作为最早的范围放置，这是以前只有Sample的地方。

请参阅下面的Jquery和html。

希望这有帮助，

<强>码

var words = ['Sample', 'count'];
var keywords = ['import', 'public', 'class', 'static', 'void', 'for', 'if', 'else'];
$(document).ready(function() {
    $('#showVariables').click(function() {
        alert($('.identifier').html());
        var wordsHtml = $('.identifier').html();
        $.each(words, function(idx, word) {
            var reg = new RegExp(word, 'g');
            wordsHtml = wordsHtml.replace(reg, '<span class="highlight" style="backgroun-color:yellow;">' + word + '</span>');

        })
           alert(" AFter HTML highlight == " + wordsHtml);
        $('#identifier').html(wordsHtml);
    });


});

<强> HTML

<div id="menuDiv"><span id="showVariables" class="button">Variables</span><span id="showKeywords" class="button">Keywords</span></div>
<div id="codeDiv">
<br><span class="keyword">import</span> java.io.*;
<br>
<br><span class="keyword">public</span> <span class="keyword">class</span> <span class="identifier">Sample {

<br>&nbsp;&nbsp;<span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> main(String args[]) {
<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>int</span> <span class="identifier">count</span> = 0;
</span>

按钮不突出显示文本

2 个答案: