代码天地

外贸建站之关键词高亮显示JS代码分享
2019.08.14 代码天地

外贸建站之关键词高亮显示JS代码分享

 var keys = [
["iProg+ Programmer","http://www.chinaobd2.com","#ff0000"],
["GM Tech2","http://www.chinaobd2.com","#00ff00"],
["VAS 5054A","http://www.chinaobd2.com","#0000ff"],
["Renault CAN Clip","http://www.chinaobd2.com","#cc6600"]
]
var bookmark;
if(document.createRange){
var range = document.createRange();
}else{
var range = document.body.createTextRange();
bookmark = range.getBookmark();
}
var key;
for(var i = 0;key = keys[i];i++){
if(range.findText){
range.collapse(true);
range.moveToBookmark(bookmark);
while(range.findText(key[0])){
range.pasteHTML(range.text.fontcolor(key[2]));
}
}else{
var s,n;
s = window.getSelection();
s.collapse(document.body,0);
while(window.find(key[0])){
var n = document.createElement("SPAN");
n.style.color=key[2];
s.getRangeAt(0).surroundContents(n);
}
}
}

这个代码可以非常方便的实现关键词不同颜色,高亮显示,具体操作可以关联到数据库,给不同关键词加上随机的高亮颜色。

具体演示效果,可以参考案例:http://www.aid12580.com/demo/40.html

上一篇下一篇
标签

有问
必答