版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/arthurwanggang/article/details/72621341
上次项目中，有很多文本提示的内容，都是相同的颜色，每次遇到这样的情况都是一贯的做法，也是很多人的传统做法，用标签，加上相同的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样式表了，