react native 关键字标红

代码实现先贴上：

/**
 * 关键字过滤标红方法
 * @param {String} data 需要关键字标红的整体内容
 * @param {Array} keyWords 需要标红的关键字数组
 * @return 返回标红的关键字渲染Dom或者不是标红的关键字Dom或者是空
 * */
function keyWordsRender(data, keyWords) {
  if (!keyWords || !keyWords.length || !data) {
    return data;
  }
  // 组装(keyword|keyword|keyword)这种形式的正则
  let regStr = `(${keyWords.join('|')})`;
  let reg = new RegExp(regStr);
  // split 使用正则匹配到 () 会返回其拆分依据，也就是每一项keyword
  let resultArr = data.split(reg);
  // 过滤掉空的存在
  resultArr.filter(item => item);
  // 遍历判断去渲染
  return resultArr.map((item, index) => {
    // 段落缩进
    // if (index === 0) {
    //   item = '        ' + item;
    // }
    if (keyWords.indexOf(item) === -1) {
      return <Text key={index}>{item}</Text>;
    } else {
      return (
        <Text key={index} style={{color: 'red'}}>
          {item}
        </Text>
      );
    }
  });
}

实现思路：首先将关键字数组以数组连接成字符串，然后使用new Regexp将字符串传入，生成"(张三|李四)"这个正则匹配，之后重点来了，靠正则来分割内容使结果包含分隔块，split 拆分正则中如果包含括号，则其匹配拆分依据将会包含在返回的数组中。就会把张三、李四一并返回。其中还会有空的字符串，所以要过滤一下。最后遍历判断渲染即可。代码如下：

let keyWords = ['张三', '李四']
let data = "张三是李四的亲戚";
let regStr = `(${keyWords.join('|')})`;  // "(张三|李四)"
let reg = new RegExp(regStr);
let resultArr = data.split(reg); // ["", "张三", "是", "李四", "的亲戚"]

这样关键字渲染的关键步骤就实现了。