总结Electron项目中全文搜索遇到的坑

最近在完善Electron项目中的全文搜索功能，遇到了不少坑，大多与正则有关。因正则这块儿一直比较弱，干脆总结一下。

Sql通配符

全文搜索必然会用到sql查询中的关键字like，于是不用想就能写出下面的查询语句：

'select * FROM \'tbl_msg\' WHERE content like \'%'+key+'%\''

然后测试就反馈问题了: 在搜索的关键字中，带有%,_时，会搜出很多不相干的内容。

因为%和_是sql语句中的通配符，传入上面的语句中，不会被识别为文本去匹配，需要添加转义符。

因搜索的关键字是变量，需要将关键字中的通配符替换为加上转义字符前缀，这里转义字符可以通过ESCAPE关键字去定义。

// 执行sql查询前，替换关键字
const escapeTexts = ['%', '_'];
_.each(escapeTexts, item => {
  searchKey = String(searchKey).replace(new RegExp(item, 'g'), `\\${item}`);
});

`'select * FROM \'tbl_msg\' WHERE content like \'%'+key+'%\'' ESCAPE \'\\\'`

我们定义了转义符\，对关键字中出现的%和_进行替换。

通讯录搜索

全文搜索包含了对本地数据库和服务器中用户列表的搜索，这种搜索场景下，关键字中的标点符号和特殊字符没有意义，需要在搜索前进行过滤。

// 去除文本中的特殊字符和标点
 escapePunctuation(text) {
   return text.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g, '');
  },

关键字高亮

在展示搜索结果时，需要对匹配内容进行高亮。在jsx中，将匹配内容替换为html字符串即可实现，但若只这么写，会有诸多问题。

特殊字符的转义
这里使用了lodash提供的escapeRegExp方法
大小写的替换
搜索匹配时，我们应忽略大小写的区分，但在高亮替换时，不能直接用搜索关键字去替换，这样会导致原文的大小写被替换。

text = text.replace(/keyReg/gi, (keyText) => `<span class="highlight">${keyText}</span>`)

html转jsx
因关键字高亮会将文本转换为带有html的字符串，在写jsx时，需要使用dangerouslySetInnerHTML属性，这样显然不利于封装和组件复用。建议通过htmr之类的库进行直接转换，生成react node。
文本中特殊字符转换
使用htmr前，需要考虑待替换文本中有特殊字符的可能，尤其是<>，例如<message>123<message>这样的文本经htmr转换后，jsx会将<message>识别为html标签，导致报错。因此，高亮关键字的第一步应该是替换特殊字符。

  const escapeHtml = (html) => {
    return String(html)
      .replace(/&(?!\w+;)/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  }
  
  const convertHtmlWithSearchKey = (text, searchKey, noWrap) => {
    text = escapeHtml(text);
    const keyReg = new RegExp(escapeRegExp(searchKey), 'gi');
    text = text.replace(keyReg, (keyText) => `<span class="highlight">${keyText}</span>`);
    if (!noWrap) {
      text = text.replace(/(\r\n)|\n|\r/g, '<br>');
    }
    return convert(text);
  },