关键字高亮显示

上次项目中,有很多文本提示的内容,都是相同的颜色,每次遇到这样的情况都是一贯的做法,也是很多人的传统做法,用标签,加上相同的class,如果客户“高兴”,在加几个高亮提示的,在删除几个什么的需求,虽说不是很麻烦的事情,对于技术人员来说还是有很大的改进空间的;闲的时候就改进原来的项目中的一些细节

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>keyWordsLightHigh</title>
</head>
<body>
   <div id="testKeyWords">
       这里是一段测试的文字。我是一个粉刷匠。你是一个小猫咪,他是一个大金毛
   </div>
   <script type="text/javascript">
       window.onload = function(){
           var testKeyWords = document.getElementById("testKeyWords");
           function keyWordsLightHigh(e,keys,color){
               var setK = "";
               for(var i=0;i < keys.length; i++){
                   setK = keys[i];
                   //替换关键字
                   e.innerHTML = e.innerHTML.replace(setK,"<span style='color: "+color+"'>"+setK+"</span>");
               }
           }
           //关键字数组
           var keyslist = ["文字","粉刷匠","小猫咪","大金毛"];
           var color = "red";
           keyWordsLightHigh(testKeyWords,keyslist,color);
       }
   </script>
</body>
</html>

这样就方便了很多,添加相应的数组元素,修改颜色都是很方便。而不需要频繁的改动html和css样式表了,

发布了9 篇原创文章 · 获赞 13 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览