我已经看到了关于使用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;
}
这可以用正则表达式来改变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运行”)
编辑:
这更复杂的版本的作品,即使你有表格和材料:
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运行”)
我Rangy库中有这样的支持,虽然我承认它是仅此一个使用相当大的脚本。
但是:四联zxsw POI
我做了一个使用正则表达式的演示。
http://rangy.googlecode.com/svn/trunk/demos/textrange.html
// 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);