Jquery 按钮不突出显示文本

我有这个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);
    });


}); 

var words=['Sample'，'count']；
var关键字=['import'，'public'，'class'，'static'，'void'，'for'，'if'，'else']；
$（文档）.ready（函数（）{
如果（#showVariables）。单击（函数（）{
var wordsHtml=$（'#identifier'）.html（）；
$.each（单词，函数（idx，单词）{
var reg=新的RegExp（单词“g”）；
wordsHtml=wordsHtml.replace（reg，“+word+”）；
})
$（'#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;

VariablesKeywords

导入java.io.*；



公共类样本{

公共静态void main（字符串参数[]）{

整数计数=0；

我试图突出显示关键字和标识符。我可能错在哪里？

问题是没有“如果单击”，选择器的语法也错误-缺少引号

由于缺少更好的术语，“如果”，只有在用户点击时才会出现

更改：

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

到

编辑：重新编码以将各种数组传递给同一突出显示函数。演示使用数组“单词”和“关键字”

演示：

保留字“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;
}

var words=['Sample'，'count']；
var关键字=['import'，'public'，/*'class'，*/'static'，'void'，'for'，'if'，'else']；
$（文档）.ready（函数（）{
$（'#showVariables'）。单击（函数（）{
$（'.identifier'）。每个（函数（idx，el）{
变量$el=$（el）
$el.html（hightLightHtml（$el.html（），单词“red”）；
})
});
$（'#showKeywords'）。单击（函数（）{
$（'.keyword'）。每个（函数（idx，el）{
//console.log（idx）
变量$el=$（el）
$el.html（hightLightHtml（$el.html（），关键字，'yellow'）；
})
});
});
函数hightLightHtml（wordsHtml、wordsArray、highlightClass）{
$.each（单词数组，函数（idx，单词）{
var reg=新的RegExp（单词“g”）；
wordsHtml=wordsHtml.replace（reg，“+word+”）；
})
返回wordsHtml；
}

演示（单击

变量

文本，您将看到HTML的前后警报

突出显示在这里可以很好地工作：（我已经清理了你的html以及脚本）

你好，很多事情都不正确：

1）

$（'#showVariables'）。单击（函数（）

2）

.identifier

是一个类，因此请使用

3）

identifier

应作为最外面的跨度放置，而最外面的跨度是之前仅用于样本的位置

请参阅下面的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);
    });


});

var words=['Sample'，'count']；
var关键字=['import'，'public'，'class'，'static'，'void'，'for'，'if'，'else']；
$（文档）.ready（函数（）{
$（'#showVariables'）。单击（函数（）{
警报（$（'.identifier'）.html（））；
var wordsHtml=$（'.identifier'）.html（）；
$.each（单词，函数（idx，单词）{
var reg=新的RegExp（单词“g”）；
wordsHtml=wordsHtml.replace（reg，“+word+”）；
})
警报（“HTML高亮显示后==”+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>

VariablesKeywords

导入java.io.*；



公共类样本{

公共静态void main（字符串参数[]）{

整数计数=0；

如果（#显示变量）

您缺少此处的引号。这只是输入错误吗？我尝试过使用引号，但它不起作用。选择器必须被引用。我不明白为什么要在if语句中绑定click事件。好吧……您还有另一个选择器问题。有几个class=Identifier，但我看不到和id=Identifier。不知道您想要这个元素我只是想突出显示那些存储在变量中的单词。您好@AnkurKaushal是的，这就是您需要的吗？除了语法上的一些修复，请让我知道我是否遗漏了什么，

：）

cheerios！您看到我的演示了吗@AnkurKaushal在HTML中也有一个小问题

idetifier

span应该是水獭整个代码的大多数元素请参见此处：

Sample{

part与你的相比更特别？让我知道它是怎么回事。顺便说一句，看看演示，它确实在那里添加了亮点以供参考，干杯！@AnkurKaushal我已经更正了你的HTML以及Jquery代码：并重播了一些部分==>请不要忘记accpet，并向上投票答案，

B-

干杯！

<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>