js關鍵詞變色，數組打亂，數組去重的實現和封裝

時間 2019-11-05

原文原文鏈接

1.前言

今天，把本身以前封裝過的一部分小功能操做分享出現，都是一些能夠說是比較經常使用，實現起來比較簡單，代碼又比較少的一些功能或操做，好比關鍵詞變色，數組打亂，數組去重等。javascript

2.關鍵詞變色

這個功能很常見，特別是在搜索引擎執行搜索的時候。其它很少說了，直接上代碼css

<!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.onload=function()
{
  var btn=document.getElementById("btn");
  btn.onclick=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>

運行一下html

就是要這個效果！
實現原理和過程：首先，點擊按鈕的時候獲取文本框的value，經過以空格分割，變成一個數組（arr=key.split(/\s+/);），而後把數組傳到createExp()，建立一個正則的字符，好比上面就是傳['前端','過來']，而後createExp()就會返回(前端|過來)，再到就是經過建立一個正則(前端|過來)/g，最後就是把#thediv的內容進行正則匹配，好比：全部‘前端’就會被替換成<span>前端</span>。
這裏值得注意的一點，就是，進行正則匹配以前，必定要過濾掉內容的html標籤，避免影響下一次的運行，若是不過濾，就是這個bug前端

你們都看到了吧，我只輸入‘過來’，結果‘前端’也變色了，那是由於我輸入‘過來’的時候，以前就輸入過‘前端’運行了一次，下一次不清除就會有這個bug，清除了就沒事了！java

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;
    }

運行一下json

實現原理和過程：核心代碼就是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;
}

運行一下dom

這個的實現原理和過程沒什麼好說的了，就是遍歷原來的數組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;
}

運行一下

效果一下樣！