关键字高亮显示

最新推荐文章于 2022-02-12 17:16:34 发布

arthurwanggang

最新推荐文章于 2022-02-12 17:16:34 发布

阅读量859

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/arthurwanggang/article/details/72621341

版权

javascript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

上次项目中，有很多文本提示的内容，都是相同的颜色，每次遇到这样的情况都是一贯的做法，也是很多人的传统做法，用标签，加上相同的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>