js做高亮的两个方法：1、正则替换；2、利用文字对象
方法一：利用正则替换
Code<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
<!--
function highLight(ele,keys)
{
var reg = new RegExp("(" + keys.replace(/,/,"|") + ")","g");
ele.innerHTML = ele.innerHTML.replace(reg,"<font color=\"red\">$1</font>");
}
window.onload = function()
{
highLight(document.getElementsByTagName("p")[0],"li,jin");
}
//-->
</script>
</head>
<body>
<p>liujinzhong liujinzhong liuzhong</p>
</body>
</html>
方法二：利用文本替换，目前一些类似点睛的那种文字富媒体广告的实现都是基于该方法
CodeArchorTag1 = "<A id=\"vad_" + n + "\" name=\""+n+"\" title=\"" + adtitle + "\" class=\"vLink1\" ";
ArchorTag2 = " href=\"" + click_url + "\" target=\"_blank\" onmouseover=\"this.style.borderBottom='2px "+link_color+" solid';
var fxEvent=arguments[0];kwmouseover(this,"+n+",fxEvent);\" onmouseout=\"this.style.borderBottom='1px "+link_color+" dotted';kwmouseout(this,"+n+")\" >" + keywords + "</A>";
if (notIE) {
var textRange = document.body.createTextRange();
while (textRange.findText(keywords)) {
var parentNode = textRange.parentElement();
kwAnchor = ArchorTag1 + " style=\"font-size:1em;border-bottom: 1px "+link_color+" dotted;text-decoration: underline;cursor: hand;color:"+link_color+";\"" + ArchorTag2;
if (filterNode(parentNode) && inAdRange(parentNode)) {
if(kwcount>max_pwn)
break;
kwcount++;
textRange.pasteHTML(kwAnchor);
break;
}
textRange.collapse(false);
}
}
else {
Accept_Node = function (node) {
if (node.tagName == "IMG" || node.tagName == "A" || node.tagName == "FORM" || node.tagName == "OBJECT" || node.tagName == "SCRIPT") {
return NodeFilter.FILTER_REJECT;
} else {
return NodeFilter.FILTER_ACCEPT;
}
};
var TreeWalker = document.createTreeWalker(ad_area, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, Accept_Node, false);
var vNodes = new Array();
var range = document.createRange();
while (cNode = TreeWalker.nextNode()) {
if (cNode.nodeValue != null) {
vNodes[vNodes.length] = cNode;
}
}
for (var i = 0; i < vNodes.length; i++) {
var key = vNodes[i].nodeValue;
var pos = key.indexOf(keywords);
if (pos != -1) {
range.selectNode(vNodes[i]);
range.setStart(vNodes[i], pos);
range.setEnd(vNodes[i], range.startOffset + keywords.length);
range.deleteContents();
var nNode = document.createElement("span");
ArchorTag = ArchorTag1 + " style=\"font-size:1em;\"" + ArchorTag2;
nNode.innerHTML = ArchorTag;
range.insertNode(nNode);
break;
}
}
}
