起因
本博文源于最近做的一道笔试题，题目如下：
假设现有一篇文章，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文档
