javascript - javascript-当用户在输入字段中键入字符时，突出显示DIV的文本

我已经看到许多有关使用JavaScript突出显示DIV中的文本的文章，但没有任何文章可以满足我的需求。

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

我想这已经有人在某处完成了，但是我还没有在这里或Google上找到符合我需要的行为。

任何反馈表示赞赏。

当用户在输入字段中键入字符时，此代码将执行。它的问题是在某些情况下，当我键入时，它会将字符串“”插入表中，但我不知道为什么，所以我正在寻找其他解决方案。

感谢您的反馈意见!

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

最佳答案

可以使用正则表达式轻松更改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;
};

Demonstration(单击“使用JS运行”)

编辑:

即使您有 table 和东西，这个更复杂的版本也可以使用:

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 (单击“使用JS运行”)

关于javascript - javascript-当用户在输入字段中键入字符时，突出显示DIV的文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15951214/