Question

我已经使用了其他人的荧光笔代码，我尝试对其进行修改以使其适用于我的项目。整体而言，代码工作正常，但显示结果是一个小问题。突出显示器找到指定的单词，并将元素中的整个文本替换为指定的关键字。

所以在这种情况下，如果我想要突出显示一个单词＆＃34; cat＆＃34;从句子：＆＃34;猫是一个很棒的宠物＆＃34;我得到的结果是＆＃34;猫是一个很棒的宠物＆＃34;。总是使用大写很容易，但问题是所需的单词可以在句子中的不同位置。例如：我爱我的猫。

我想要做的是让脚本记住以前的区分大小写状态，并在突出显示之后我希望它显示以前指定的大写或小写。

我在表格函数中搜索了一个关键字，找到关键字后应突出显示它。

// highlighter func
    function highlight_words(word, element) {
        if(word){
            var textNodes;
            word = word.replace(/\W/g, '');
            var str = word.split(" ");

            $(str).each(function(){
                var term = this;
                var textNodes = $(element).contents().filter(function(){ return this.nodeType === 3 });

                textNodes.each(function() {
                    var content = $(this).text();
                    var regex = new RegExp(term, "gi");

                    content = content.replace(regex, '<span class="highlight">' + term + '</span>');
                    $(this).replaceWith(content);
                });
            });
        }
    }

我如何触发功能

//search_inp is the keyword entered in the text input field such as "Cat"
highlight_words(search_inp, $("#FoundElem table tbody .perm-name a"));

显示什么

<div id="FoundElem">
<table cellspacing="1" class="perm-table" id="table0000">
<tbody><tr class="row4" id="temp0">
    <td class="perm-name"><a title=""><span class="highlight">cat</span> is an awesome pet</a></td>
</tr></tbody>
</table>
</div>

Answer 1

我能够让它工作的方法是为所有关键字添加CSS大小写。它适用于我的情况，但对于你想保留以前值的情况，它将无效。

无论如何，这是一个最终帮助我的CSS。

.highlight {
    background-color:yellow;
    text-transform:capitalize;
}

将字符串中找到的单词替换为case（in）敏感（搜索和突出显示）

1 个答案: