javascript - 应用正则表达式进行文本突出显示

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这将使您了解发生了什么，但其中没有上述代码。单词被突出显示，但我不明白添加两个 span 标签背后的原因。

Answer 1

您的测试数组中同时包含小写和大写单词:

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

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

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

这意味着循环将把 CAR 与 car 进行匹配(不区分大小写)，将其包装在一个跨度中，然后将 Car 与 进行匹配>car (同样不区分大小写)并将其包装在第二个跨度中。

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

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

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