我想要一个函数,找到我在DOM中的数组中的一些字符串并强调它.
例如.
keywords[0] = 'linux';
keywords[1] = 'suse pro';
<body>
im a huge fan of <em>linux</em> and at the moment im using <em>suse pro</em> and finds it amazing.
</body>
我怎么用最简单的方式做到这一点.提前致谢
编辑:我找到了一个非常简单的方法来完成这个:jquery突出显示插件!干杯!
几个月前我不得不这样做.最初有人使用了其他人建议的innerHTML的字符串操作,但这条路导致了疯狂.麻烦的角落案例是:如果标记的关键字是元素的类名或id,该怎么办？我们也不想破坏任何嵌入式JavaScript并且意外地导致无效标记.还需要处理嵌入式CSS样式.最后,您最终为HTML4.0 + ECMAscript + css编写了一个文本解析器,即使在有限的情况下,它也是很多工作 - 它正在编写您自己的Web浏览器 - IN JAVASCRIPT!
但是我们已经在Web浏览器中有一个HTML + JS + CSS解析器,它为我们生成了一个很好的DOM树.所以我决定用它.这就是我最终提出的:
keywords = ['hello world','goodbye cruel world'];
function replaceKeywords (domNode) {
if (domNode.nodeType === Node.ELEMENT_NODE) { // We only want to scan html elements
var children = domNode.childNodes;
for (var i=0;i<children.length;i++) {
var child = children[i];
// Filter out unwanted nodes to speed up processing.
// For example, you can ignore 'SCRIPT' nodes etc.
if (child.nodeName != 'EM') {
replaceKeywords(child); // Recurse!
}
}
}
else if (domNode.nodeType === Node.TEXT_NODE) { // Process text nodes
var text = domNode.nodeValue;
// This is another place where it might be prudent to add filters
for (var i=0;i<keywords.length;i++) {
var match = text.indexOf(keywords[i]); // you may use search instead
if (match != -1) {
// create the EM node:
var em = document.createElement('EM');
// split text into 3 parts: before, mid and after
var mid = domNode.splitText(match);
mid.splitText(keywords[i].length);
// then assign mid part to EM
mid.parentNode.insertBefore(em,mid);
mid.parentNode.removeChild(mid);
em.appendChild(mid);
}
}
}
}
只要您小心过滤掉您不想处理的事物(例如,空文本节点只包含空格 - 有很多它们,相信我),这非常快.
额外的过滤未实现算法清晰度 - 留给读者练习.
| 归档时间： |
|
| 查看次数： |
2074 次 |
| 最近记录： |