将正则表达式应用于文本高亮显示

Question

我在代码中将jqxDataAdapter用于jqxWidgets，如下所示：

var dataAdapter = new $.jqx.dataAdapter(source, {

            loadComplete: function (records) {
                var html;
                var color = '#F3F315';

                //Get data
                var records = dataAdapter.records;
                var length = records.length;
                console.log("Checking Length: "+length);// Outputs 5
                for (var i = 0; i < length; i++) {
                console.log("checking Words here: " +records[i].word_text);// Displays five words in the console log one 
                }


                html = "<div style='margin: 10px;'><pre>" + records[1].note_content + "</pre></div>"; //records[1].note_content  shows a long paragraph of text with words to highlight

   // Is this correct way to apply regular expression?
                for (var i = 0; i < length; i++) {

                    html = html.replace(new RegExp(records[i].word_text, 'ig'), '<span style="background-color:' + color + ';">' + records[i].word_text + '</span>');
                }




                console.log("How many span tags you are noticing here?: " + html);
                $("#docContent").html(html);
            },
            loadError: function (xhr, status, error) { },
            beforeLoadComplete: function (records) {

            }
        });

我想知道，正则表达式是否正确应用，因为在文档中的每一个地方，我都注意到需要高亮显示的单词被两个<span>标记包围。例如，<span style="background-color:#F3F315;"><span style="background-color:#F3F315;">CAR</span></span>

下面是JSFiddle，它会让您知道发生了什么，但是它没有上面的代码。单词正在被突出显示，但我不明白为什么会添加两个跨度标记。

Answer 1

测试数组中有小写和大写单词：

var data = [{
    name: 'CAR'
}, {
    name: 'Car'
}, {
    name: 'Bus'
}, {
    name: 'BUS'
}, {

您的正则表达式是不区分大小写的，这就是您使用的标志列表中的i：

new RegExp(records[i].word_text, 'ig')

这意味着循环将匹配CAR与car (大小写不敏感)，将其封装在一个span中，然后将Car与car (同样不区分大小写)匹配起来，并在第二个span中将其包装。

您可以通过删除i标志并保留g (全局)来匹配测试数组中单词的特定大小写：

new RegExp(records[i].word_text, 'g')

或者您希望从数组中删除重复的大小写条目，并保留i标志，这样单词就不会不止一次匹配。