Javascript 当用户在输入字段中键入字符时，高亮显示DIV的文本

我看到过许多关于使用javascript在DIV中突出显示文本的帖子，但没有一篇能完全满足我的要求

我需要做的是在用户输入搜索词时，逐个字符地突出显示特定DIV中的文本。相反，当用户退格或删除字符时，我需要“取消突出显示”同一DIV的文本

我想已经有人在某个地方做过了，但我还没有在这里或谷歌上找到一个行为完全符合我需要的帖子

任何反馈都将不胜感激

此代码在用户向输入字段中键入字符时执行。它的问题是，在某些情况下，它会在我键入时将字符串“”插入表中，我不知道为什么，因此我正在搜索不同的解决方案

谢谢你的反馈

function filterTable(Stxt, table) {
     dehighlight(document.getElementById(table));
     if (Stxt.value.length > 0)
       highlight(Stxt.value.toLowerCase(), document.getElementById(table));
  }

  function dehighlight(container) {
     for (var i = 0; i < container.childNodes.length; i++) {
       var node = container.childNodes[i];
       if (node.attributes && node.attributes['class'] && node.attributes['class'].value == 'highlighted') {
           node.parentNode.parentNode.replaceChild(
           document.createTextNode(node.parentNode.innerHTML.replace(/<[^>]+>/g, "")),node.parentNode);
           return;
       } else if (node.nodeType != 3) {
           dehighlight(node);
       }
     }
  }

  function highlight(Stxt, container) {
    for (var i = 0; i < container.childNodes.length; i++) {
        var node = container.childNodes[i];
        if (node.nodeType == 3) {
            var data = node.data;
            var data_low = data.toLowerCase();
            if (data_low.indexOf(Stxt) >= 0) {
                var new_node = document.createElement('span');
                node.parentNode.replaceChild(new_node, node);
                var result;
                while ((result = data_low.indexOf(Stxt)) != -1) {
                    new_node.appendChild(document.createTextNode(data.substr(0, result)));
                    new_node.appendChild(create_node(
                    document.createTextNode(data.substr(result, Stxt.length))));
                    data = data.substr(result + Stxt.length);
                    data_low = data_low.substr(result + Stxt.length);
                }
                new_node.appendChild(document.createTextNode(data));
            }
        } else {
            highlight(Stxt, node);
        }
    }
  }

  function create_node(child) {
    var node = document.createElement('span');
    node.setAttribute('class', 'highlighted');
    node.attributes['class'].value = 'highlighted';
    node.appendChild(child);
    return node;
  }

函数过滤器表（Stxt，表）{
dehighlight（document.getElementById（表））；
如果（Stxt.value.length>0）
突出显示（Stxt.value.toLowerCase（），document.getElementById（表））；
}
功能除高灯（容器）{
对于（var i=0；i/g，“”），node.parentNode）；
返回；
}else if（node.nodeType！=3）{
去高亮度（节点）；
}
}
}
功能突出显示（Stxt、容器）{
对于（var i=0；i=0）{
var new_node=document.createElement（'span'）；
node.parentNode.replaceChild（新节点，节点）；
var结果；
而（（结果=数据低索引（Stxt））！=-1）{
new_node.appendChild（document.createTextNode（data.substr（0，result））；
新建\u节点。追加子节点（创建\u节点(
document.createTextNode（data.substr（result，Stxt.length））；
data=data.substr（结果+Stxt.length）；
data_low=data_low.substr（结果+文本长度）；
}
新建_node.appendChild（document.createTextNode（data））；
}
}否则{
突出显示（Stxt，node）；
}
}
}
函数创建_节点（子节点）{
var节点=document.createElement（'span'）；
node.setAttribute（'class'，'highlighted'）；
node.attributes['class'].value='highlighted'；
追加子节点（子节点）；
返回节点；
}

使用正则表达式可以轻松地更改div的内容。下面是一个简单的实现：

var s = document.getElementById('s');    // your input
var div = document.getElementById('a');  // the div to change
var t = a.textContent || a.innerText;
s.onkeyup = function(){
   div.innerHTML = this.value
   ? t.replace(new RegExp('('+this.value+')','ig'), '<span class=highlight>$1</span>')
   : t;
};

var s=document.getElementById（'s'）；//你的意见
var div=document.getElementById（'a'）；//div需要更改
var t=a.textContent | | a.innerText；
s、 onkeyup=函数（）{
div.innerHTML=this.value
？t.replace（新的RegExp（“（“+this.value+”）”、“ig”）、“$1”）
：t；
};

（单击“使用JS运行”）

---

编辑：

即使您有桌子和其他东西，这个更复杂的版本也可以工作：

var s = document.getElementById('s');
var div = document.getElementById('a'); 

function changeNode(n, r, f) {
  f=n.childNodes; for(c in f) changeNode(f[c], r);
  if (n.data) {
    f = document.createElement('span');
    f.innerHTML = n.data.replace(r, '<span class=found>$1</span>');
    n.parentNode.insertBefore(f, n);
    n.parentNode.removeChild(n);
  }
}
s.onkeyup = function(){
  var spans = document.getElementsByClassName('found');
  while (spans.length) {
    var p = spans[0].parentNode;
    p.innerHTML = p.textContent || p.innerText;
  }
  if (this.value) changeNode(
    div, new RegExp('('+this.value+')','gi')
  );
};

var s=document.getElementById（'s'）；
var div=document.getElementById（'a'）；
功能更改节点（n、r、f）{
f=n.childNodes；对于（f中的c）changeNode（f[c]，r）；
如果（n.数据）{
f=document.createElement（'span'）；
f、 innerHTML=n.data.replace（r，$1'）；
n、 parentNode.insertBefore（f，n）；
n、 parentNode.removeChild（n）；
}
}
s、 onkeyup=函数（）{
var span=document.getElementsByClassName（'found'）；
while（跨度、长度）{
var p=span[0]。父节点；
p、 innerHTML=p.textContent | | p.innerText；
}
if（this.value）changeNode(
div，新的RegExp（“（“+this.value+”）”，“gi”）
);
};

（单击“使用JS运行”）

我的库支持这一点，尽管我承认这是一个非常大的脚本，只用于这一次

---

演示：

我制作了一个使用正则表达式的演示

// Input element
var input = document.getElementById("highlighter"), 
    // Text container element
    divText = document.getElementById("text"),
    // using textContent property if it exists
    textProp = ("textContent" in divText) ? "textContent" : "innerText",
    // Getting text to discard html tags (delete line 6 and use divText.innerHTML if you want to keep the HTML tags)
    originalText = divText[textProp];

function handler(){
    // if Input.value is empty clear the highlights
    if(!this.value){
        divText.innerHTML = originalText;
        return true;
    }
    // Regex to group the matches, with tags 'global' and 'case insensitive'
    var regex = new RegExp("("+this.value+")", "ig");
    // replace text with the new one ($1 refers to first group matched by regex)
    divText.innerHTML = originalText.replace(regex, "<span class='highlight'>$1</span>");

};
// adding listener to input.. IE uses attachEvent method
input.addEventListener("keyup", handler, false);

//输入元素
var input=document.getElementById（“荧光笔”），
//文本容器元素
divText=document.getElementById（“文本”），
//使用textContent属性（如果存在）
textProp=（“divText中的textContent”）？“文本内容”：“内部文本”，
//获取文本以丢弃html标记（如果要保留html标记，请删除第6行并使用divText.innerHTML）
originalText=divText[textProp]；
函数处理程序（）{
//如果Input.value为空，则清除突出显示
如果（！this.value）{
divText.innerHTML=原始文本；
返回true；
}
//Regex将匹配项分组，标记为“全局”和“不区分大小写”
var regex=new RegExp（“（“+this.value+”），“ig”）；
//用新文本替换文本（$1表示由regex匹配的第一组）
divText.innerHTML=originalText.replace（regex，“$1”）；
};
//正在将侦听器添加到输入。。IE使用attachEvent方法
addEventListener（“keyup”，处理程序，false）；

---

因此用户正在复制（通过键入）div中的文本，并且在复制该文本时，该文本会突出显示？div是否只包含文本，还是有子元素？如果它只包含，那么脚本就不必那么复杂，但是如果它包含类似hello的内容，那么在不删除所有子元素的情况下很难匹配“hello”（使用innerText/textContent）。当需要这样做时，光标是集中在某个特定的元素上，还是光标在文本输入中？因此会有一个输入字段，用户在其中键入一个搜索词。作为用户类型，如果在指定的DIV中找到匹配项，则它们将作为用户类型逐字符高亮显示，并作为u删除高亮显示