在DOM中搜索字符串时不区分大小写

Case insensitive searching for a string in DOM

本文关键字：不区 大小写 字符串 DOM 搜索      更新时间：2023-09-26

我在每个文本节点上迭代，并寻找一个搜索字符串，无论它在该文本节点中是否可用。如果它存在，我将围绕跨度节点进行高亮显示。示例代码位于以下链接：。http://jsfiddle.net/LcRDz/.

现在，如果用户给出一个单词，它将只搜索该单词。无论大小写，我都需要在DOM中搜索单词。例如，如果我的搜索词是the，它应该突出显示单词The, THE, the。

在使用indexOf进行检查之前，请对两个值使用toLowercase，使比较不区分大小写。

 //Notice both n.nodeValue and word are sent to lowercase.
 for (var i;
        (i = n.nodeValue.toLowerCase().indexOf(word.toLowerCase(), i)) > -1; 
           n = after) {
             var after = n.splitText(i + word.length);
             var highlighted = n.splitText(i);
             var span = document.createElement('span');
             span.className = "spanClass";
             span.style.backgroundColor = "red";
             span.appendChild(highlighted);
             after.parentNode.insertBefore(span, after);
         }

JS FIDDLE:http://jsfiddle.net/LcRDz/2/

您应该通过修改来解决问题

for (var i;
    (i = n.nodeValue.indexOf(word, i)) > -1; n = after)

带有

for (var i;
    (i = n.nodeValue.toLowerCase().indexOf(word.toLowerCase(), i)) > -1; n = after)

从更改highlightWords方法中的for循环

原件：

for (var i;
             (i = n.nodeValue.indexOf(word, i)) > -1; n = after)

新增：

for (var i;
             (i = n.nodeValue.toLowerCase().indexOf(word.toLowerCase(), i)) > -1; n = after)
相关文章：