一道标注关键词的笔试题

起因

本博文源于最近做的一道笔试题，题目如下：

假设现有一篇文章，var content = "...大量文字"，
文章中触及到一些关键词汇,如 ["Javascript","Php","编程语言","前端框架", "6.5"] 等内容。
如何在文章中发现这些关键词，并将背景设置为红色或者改变字体颜色并标示出来。

解法

以下分享两种解法：

1、字符串操作：

var content = '我所做的工作方向主要是前端开发，对前端框架的使用有丰富经验，使用的编程语言是Javascript，后端语言有Php，我有将近6.5个月时间balabalabalab...编不下去了';
var banList = ["Javascript","Php","编程语言","前端框架", "6.5"];

function replaceBanString(content, banList){
  // 参数检查
  if(!content){
    return '';
  }
  if(!banList || !Array.isArray(banList) || !banList.length){
    return content;
  }

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

  // 将restContentList中的内容复制逐字复制到newContent中，并判断最后几个字是否在敏感词汇中
  while(restContentList.length){
    newContent = newContent.concat(restContentList.shift());
    banList.forEach(item => {
      var lastIndex = newContent.lastIndexOf(item)
      // 没有找到关键词，则不操作
      if(lastIndex === -1){
        return
      // 最后几个文字正好是关键词的时候，将其标注
      }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)
// 我所做的工作方向主要是前端开发，对<span style="color: red">前端框架</span>的使用有丰富经验，使用的<span style="color: red">编程语言</span>是<span style="color: red">Javascript</span>，后端语言有<span style="color: red">Php</span>，我有将近<span style="color: red">6.5</span>个月时间balabalabalab...编不下去了

以上方法，逻辑较为复杂，且性能较差，当关键词汇的数量特别多的时候，时间复杂度将大大提升。

2、正则表达式

function regReplace(content, banList){
  // 将banList中的关键词汇拼接成字符串, 如 '(Javascript)|(Java)... ...'，
  // 并用 RegExp 对象，生成正则表达式对象
  const reg = new RegExp(`(${banList.map(item => '('+item+')').join('|')})`reg, 'g');
  // 替换正则匹配到的所有词汇
  return content.replace(reg, (tag) => `<span style="color: red">${tag}</span>`)
}

使用Javascript的内置对象 RegExp，利用其生成正则表达式，最后使用字符串的String.prototype.replace方法，其第二个参数可以传入函数，指定匹配到的每一项的返回值。

逻辑简单清晰，十分推荐。
使用这种方法的关键是要对 RegExp 对象，以及字符串的 String.prototype.replace 方法有比较熟练的运用。
这两者的详细用法可参考以下文档：RegExp文档， String.prototype.replace文档