起因

本博文源于最近做的一道筆試題，題目如下：

假設(shè)現(xiàn)有一篇文章，var content = "...大量文字"，
文章中觸及到一些關(guān)鍵詞匯,如 ["Javascript","Php","編程語言","前端框架", "6.5"] 等內(nèi)容。
如何在文章中發(fā)現(xiàn)這些關(guān)鍵詞，并將背景設(shè)置為紅色或者改變字體顏色并標(biāo)示出來。

解法

以下分享兩種解法：

1、字符串操作：

var content = '我所做的工作方向主要是前端開發(fā)，對前端框架的使用有豐富經(jīng)驗(yàn)，使用的編程語言是Javascript，后端語言有Php，我有將近6.5個(gè)月時(shí)間balabalabalab...編不下去了';
var banList = ["Javascript","Php","編程語言","前端框架", "6.5"];

function replaceBanString(content, banList){
  // 參數(shù)檢查
  if(!content){
    return '';
  }
  if(!banList || !Array.isArray(banList) || !banList.length){
    return content;
  }

  var restContentList = content.split('');
  var newContent = '';

  // 將restContentList中的內(nèi)容復(fù)制逐字復(fù)制到newContent中，并判斷最后幾個(gè)字是否在敏感詞匯中
  while(restContentList.length){
    newContent = newContent.concat(restContentList.shift());
    banList.forEach(item => {
      var lastIndex = newContent.lastIndexOf(item)
      // 沒有找到關(guān)鍵詞，則不操作
      if(lastIndex === -1){
        return
      // 最后幾個(gè)文字正好是關(guān)鍵詞的時(shí)候，將其標(biāo)注
      }else if(lastIndex === (newContent.length-item.length)){
        newContent = newContent.slice(0, lastIndex) + `<span style="color: red">${newContent.slice(lastIndex)}</span>`
      }
    })
  }
  return newContent
}

var result = replaceBanString(content, banList)
console.log(result)
// 我所做的工作方向主要是前端開發(fā)，對<span style="color: red">前端框架</span>的使用有豐富經(jīng)驗(yàn)，使用的<span style="color: red">編程語言</span>是<span style="color: red">Javascript</span>，后端語言有<span style="color: red">Php</span>，我有將近<span style="color: red">6.5</span>個(gè)月時(shí)間balabalabalab...編不下去了

以上方法，邏輯較為復(fù)雜，且性能較差，當(dāng)關(guān)鍵詞匯的數(shù)量特別多的時(shí)候，時(shí)間復(fù)雜度將大大提升。

2、正則表達(dá)式

function regReplace(content, banList){
  // 將banList中的關(guān)鍵詞匯拼接成字符串, 如 '(Javascript)|(Java)... ...'，
  // 并用 RegExp 對象，生成正則表達(dá)式對象
  const reg = new RegExp(`(${banList.map(item => '('+item+')').join('|')})`reg, 'g');
  // 替換正則匹配到的所有詞匯
  return content.replace(reg, (tag) => `<span style="color: red">${tag}</span>`)
}

使用Javascript的內(nèi)置對象 RegExp，利用其生成正則表達(dá)式，最后使用字符串的String.prototype.replace方法，其第二個(gè)參數(shù)可以傳入函數(shù)，指定匹配到的每一項(xiàng)的返回值。

邏輯簡單清晰，十分推薦。
使用這種方法的關(guān)鍵是要對 RegExp 對象，以及字符串的 String.prototype.replace 方法有比較熟練的運(yùn)用。
這兩者的詳細(xì)用法可參考以下文檔：RegExp文檔， String.prototype.replace文檔