Question

我正在迭代每个文本节点，并查找搜索字符串是否在该文本节点中可用。如果它存在，我将环绕span节点进行突出显示。示例代码位于以下链接：。http://jsfiddle.net/LcRDz/。

现在，如果用户提供了一个单词，它将仅搜索该单词。无论如何，我都需要在DOM中搜索单词。例如，如果我的搜索字词为the，则应突出显示单词The, THE, the。

Answer 1

在使用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/

Answer 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)

Answer 3

从

更改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)

不区分大小写，搜索DOM中的字符串

3 个答案: