前端--搜索结果对搜索关键词高亮效果

<!DOCTYPE html>
<html>
　　<head>
　　　　<title>hi</title>
　　</head>
　　<body>
　　　　<div>
　　　　　　<div class="hi"> a small test test small a hai hi</div>
　　　　</div>
　　</body>
<script>
　　function highlightKeyworld(keywords){
　　　　var array = keywords.split(" "); //分割
　　　　var targetContent=document.getElementsByName('hi');
　　　　for ( var t = 0; t < targetContent.length; t++) {
　　　　　　for ( var i = 0; i < array.length; i++) {
　　　　　　//创建表达式，匹配替换
　　　　　　var reg = new RegExp("(" + array[i].replace(/,/, "|") + ")", "g");
　　　　　　//替换重新写入
　　　　　　targetContent[t].innerHTML =targetContent[t].innerHTML.replace(reg,"<font color='red'>$1</font>");
　　　　　　}
　　　　}
　　}
　　highlightKeyworld("这是");
</script>
</html>

posted @ 2019-08-29 17:14  chelse  阅读(1316)  评论(0)    收藏  举报