角度js荧光笔过滤器突出显示文本和更改文本

时间:2017-10-16 08:21:17

标签: javascript angularjs angular-filters

enter image description here

我的高亮过滤器

app.filter('highlightWord', function () {
return function (isSectionData, selectedWord) {
    if (!isSectionData) return '';
    // var items = selectedWord.split(" ");
    var items = selectedWord.trim().replace(/ OR /g, ' ').replace(/ AND /g, ' ').replace(/ - /g, '').replace(/-/g, '').replace(/"/g, '').split(' ');
    for (var i = 0, len = items.length; i < len; i++) {
        var pattern = new RegExp(items[i], "gi");
        if (isSectionData && items[i] != "") {
            isSectionData = isSectionData.replace(pattern, '<span class="highlighted">' + items[i] + '</span>');
        }
    }
    return isSectionData;
};});

在这个荧光笔工作正常 但在某些情况下,它会更改我的HTML段落

就像我在突出搜索世界中搜索'MI'字样,如'相似'并突出显示并将其更改为'siMIlar'

是否有任何我需要更改的内容以确保我的结果正确

1 个答案:

答案 0 :(得分:0)

代码的一些更改

app.filter('highlightWord', function () {
    return function (isSectionData, selectedWord) {
        if (!isSectionData) return '';
        // var items = selectedWord.split(" ");
        var items = selectedWord.trim().replace(/ OR /g, ' ').replace(/ AND /g, ' ').replace(/ - /g, '').replace(/-/g, '').replace(/"/g, '').split(' ');
        for (var i = 0, len = items.length; i < len; i++) {
            var pattern = new RegExp(' (' + items[i] + ')', "ig");
            if (isSectionData && items[i] != "") {
                isSectionData = isSectionData.replace(pattern, function (match) {
                    return ' <span class="highlighted">' + match + '</span> ';
                });
            }
        }
        return isSectionData;
    };
});

变化是  使用ig reg表达式在RegExp中使用空格模式搜索文本