Home > Web Front-end > JS Tutorial > js keyword highlighting (keyword highlighting based on ID/tag) case introduction_javascript skills

js keyword highlighting (keyword highlighting based on ID/tag) case introduction_javascript skills

WBOY
Release: 2016-05-16 17:43:09
Original
1397 people have browsed it
Copy code The code is as follows:














A second-rate friend was cheated out of 1,200 yuan while playing games. After calling the police, he was told that he couldn't file a case if he didn't have enough 2,000 yuan. The powerful second-hand person sent another 800 yuan to that account. Do you think the liar is happy? Still very happy.





Improved version
Copy code The code is as follows:

function highlightWord(node, word) {
// Iterate into this nodes childNodes
if (node.hasChildNodes) {
var hi_cn;
for (hi_cn = 0; hi_cn < node.childNodes.length; hi_cn ) {
highlightWord(node.childNodes[hi_cn], word);
}
}
// And do this node itself
if (node.nodeType == 3) { // text node
tempNodeVal = node.nodeValue.toLowerCase();
tempWordVal = word.toLowerCase();
if (tempNodeVal.indexOf(tempWordVal) != -1) {
pn = node.parentNode;
if (pn.className != "highlight") {
// word has not already been highlighted!
nv = node.nodeValue;
ni = tempNodeVal.indexOf(tempWordVal);
// Create a load of replacement nodes
before = document.createTextNode(nv.substr(0, ni));
docWordVal = nv.substr(ni, word.length);
after = document.createTextNode(nv.substr(ni word.length));
hiwordtext = document.createTextNode(docWordVal);
hiword = document.createElement("span");
hiword.className = "highlight";
hiword.appendChild(hiwordtext);
pn.insertBefore(before, node);
pn.insertBefore(hiword, node);
pn.insertBefore(after, node);
pn.removeChild(node);
}
}
}
}
//根据Tag名高亮关键字
function SearchHighlightTag(node, key) {
if (!document.createElement) return;
if (key.length === 0) return false;
var array = new Array();
array = key.split(" ");
var element = document.getElementsByTagName(node);
for (var i = 0; i < array.length; i ) {
for (var j = 0; j < element.length; j ) {
highlightWord(element[j], array[i]);
}
}
}
//根据ID高亮关键字
function SearchHighlightID(node, key) {
if (!document.createElement) return;
if (key.length === 0) return false;
var array = new Array();
array = key.split(" ");
var element = document.getElementById(node);
for (var i = 0; i < array.length; i ) {
for (var j = 0; j < element.length; j ) {
highlightWord(element, array[i]);
}
}
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template