js关键词变色，数组打乱，数组去重的实现和封装
1.前言
今天，把自己之前封装过的一部分小功能操作分享出现，都是一些可以说是比较常用，实现起来比较简单，代码又比较少的一些功能或操作，比如关键词变色，数组打乱，数组去重等。
2.关键词变色
这个功能很常见，特别是在搜索引擎执行搜索的时候。其它不多说了，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关键词变色</title>
<style type="text/css">
span{color:red}
</style>
<script type="text/javascript">
//创建正则字符
function createExp(strArr)
{
var str="";
for(var i=0;i<strArr.length;i++)
{
if(i!=strArr.length-1)
{
str=str+strArr[i]+"|";
}
else
{
str=str+strArr[i];
}
}
return "("+str+")";
}
//替换标签，往关键字前后加上标签
function findKey(key,id)
{
var arr=null;
var regStr=null;
var content=null;
var Reg=null;
var theObj=document.getElementById(id);
arr=key.split(/\s+/);
regStr=createExp(arr);
//alert(regStr); // 如：(前端|过来)
content=theObj.innerHTML;
//过滤html标签
content=content.replace(/<\/?[^>]*>/g,'');
Reg=new RegExp(regStr,"g");
//alert(Reg);// /如：(前端|过来)/g
theObj.innerHTML=content.replace(Reg,"<span>$1</span>");
}
window.=function()
{
var btn=document.getElementById("btn");
btn.=function(){
var key=document.getElementById("text").value;
findKey(key,"thediv");
}
}
</script>
</head>
<body>
<div id="thediv">前端工程师新人在前端的道路上还有很多路要走，比如一些刚在学校读出来的前端，最需的是真正的看一场真实的前端开发项目过程（个人觉得这个非常有必要），其次，前端的覆盖面非常广，要了解的知识也非常多，所以如果能得到过来人的前端工程师网的一些建议性的话，将是帮助很大的。以下摘自一个前端工程师过来人的一点感悟。</div>
<input type="text" id="text" /><input type="button" value="搜索" id="btn" />
</body>
</html>运行一下
就是要这个效果！
实现原理和过程：首先，点击按钮的时候获取文本框的value，通过以空格分割，变成一个数组（arr=key.split(/\s+/);），然后把数组传到createExp()，创建一个正则的字符，比如上面就是传['前端','过来']，然后createExp()就会返回(前端|过来)，再到就是通过创建一个正则(前端|过来)/g，最后就是把#thediv的内容进行正则匹配，比如：所有‘前端’就会被替换成<span>前端</span>。
这里值得注意的一点，就是，进行正则匹配之前，一定要过滤掉内容的html标签，避免影响下一次的运行，如果不过滤，就是这个bug
大家都看到了吧，我只输入‘过来’，结果‘前端’也变色了，那是因为我输入‘过来’的时候，之前就输入过‘前端’运行了一次，下一次不清除就会有这个bug，清除了就没事了！
2.打乱数组
打乱数组这个，也是比较常用吧，上代码
function upsetOrder(arrOld,num){
var result=[],_length=num||arrOld.length,arr;
arr=Object.assign([],arrOld)
for(var i=0,len=arr.length;i<len;i++){
result.push(arr.splice(Math.floor(Math.random()*arr.length),1)[0]);
}
return result;
}运行一下
实现原理和过程：核心代码就是result.push(arr.splice(Math.floor(Math.random()*arr.length),1)[0]);，这个的原理就是每一次往result里面push一个元素，这个元素是从arr里面随便获取的。
这里值得注意的一点，arr=Object.assign([],arrOld)这行代码就是为了，打乱的结果不影响原来的数组。比如传进来时[1,2,3]，执行了原来的数组还是[1,2,3]。只是产生了一个新的打乱的数组而已。
3.数组去重
数组去重，相信大家遇到的就多了，无论是面试题还是项目需要，多少都会遇到过。去重的方法很多，我主要说两种方法。
第一种
function removeReapt(arrOld){
var arr=[];
for(var i=0,len=arrOld.length;i<len;i++){
if(arr.indexOf(arrOld[i])==-1){
arr.push(arrOld[i]);
}
}
return arr;
}运行一下
这个的实现原理和过程没什么好说的了，就是遍历原来的数组arrOld，判断arr有没有当前遍历到的数组元素，没有加添加进去。
第二种
第一种方法，表面上看是一层循环，但实际可以说是两层，至少在运行速度上是两层循环的速度。因为indexOf这个方法也是逐个比较的。所以我就再说第二种方法。
function removeReapt(arrOld){
var arr= [];
var json = {};
for(var i = 0,len = arrOld.length; i < len; i++){
if(!json[arrOld[i]]){
arr.push(arrOld[i]);
json[arrOld[i]] = 1;
}
}
return arr;
}运行一下
效果一下样！
实现原理和过程:遍历原数组。每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复,如果访问不到，就是arr还没有没有这元素，就添加进去，同时把这个元素作为json的一个属性，并赋值为1。这个方法，我个人觉得比较效率比第一种方法好，也不安按理解，推荐这个写法。
后续
关于js是实用或者常用的小功能操作，今天先到这里，以后再写其它的，希望能帮到大家！
共同学习，写下你的评论
评论加载中...
作者其他优质文章
