突出显示DIV的文本，用户在输入字段中键入字符 [英] Highlight text of a DIV as user types characters in an input field

问题描述

我看过很多关于使用javascript在DIV中突出显示文本的帖子，但没有一个完全符合我的要求。

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

我想这已经由某人在某处完成了，但我还没有在这里或从谷歌发现一个职位，其行为完全符合我的需要。

任何反馈意见。

这个代码在用户在输入字段中输入字符时执行。问题在于，在某些情况下，它会插入字符串 当我键入时，我不知道为什么，所以我正在寻找不同的解决方案。

感谢您的反馈！

  function filterTable（Stxt，table ）{
 dehighlight（document.getElementById（table））; 
 if（Stxt.value.length> 0）
 highlight（Stxt.value.toLowerCase（），document.getElementById（table））; 
 
 
函数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 ==''highlight'）{
 node.parentNode。 parentNode.replaceChild（
 document.createTextNode（node.parentNode.innerHTML.replace（/< [>] +> / g，）），node.parentNode）; 
 return; 
} else if（node.nodeType！= 3）{
 dehighlight（node）; 
 
 
 
 $ b 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; （（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）; 
 
 
 
 $ b函数create_node（child）{
 var node = document.createElement（'span'）; 
 node.setAttribute（'class'，'highlight'）; 
 node.attributes ['class']。value ='highlight'; 
 node.appendChild（child）; 
返回节点; 
 
  

解决方案

一个正则表达式来改变div的内容。这里有一个简单的实现：

  var s = document.getElementById（'s'）; //你的输入
 var div = document.getElementById（'a'）; // div改变
 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; 
}; 
  

演示（点击使用JS运行）

---

编辑：

即使您拥有表格和内容，这个更复杂的版本也可以运行：

  var s = document.getElementById（'s'）; 
 var div = document.getElementById（'a'）; 
 
函数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'）
）; 
}; 
  

演示 （点击使用JS运行）

I have seen many posts pertaining to highlighting text in a DIV using javascript, but none do quite what I'm looking for.

What I need to do is highlight the text within a specific DIV, character by character as the user enters the search term. Conversely, as the user backspaces or deletes characters, I need to "de-highlight" the text of the same DIV.

I imagine this has already been done somewhere by someone, but I have not yet found a post here or from Google that behaves exactly as I need.

Any feedback is appreciated.

this code executes as user types characters into an input field. The problem with it is that in some instances, it inserts the string " " into the table as I type and I don't know why, so I'm searching for a different solution.

Thanks for your feedback!

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;
  }

解决方案

This can be easily done with a regular expression to change the div's content. Here's a simple implementation :

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;
};

Demonstration (click "Run with JS")

---

EDIT :

This more sophisticated version works even if you have tables and stuff :

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')
  );
};

Demonstration (click "Run with JS")

这篇关于突出显示DIV的文本，用户在输入字段中键入字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！