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

本文介绍了突出显示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））; 函数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")