需求分析

在一些自然语言处理和知识图谱相关的应用中，需要对文本中的实体进行高亮显示，效果如下图：

内容高亮示意图

具体需求：

支持多个自定义关键词的高亮
支持自定义高亮颜色和样式
可区分不同类型的实体，如常见的实体类型人物、地点、机构等，需要以不同颜色高亮。

方案设计

由于一时没有找到现成的库，浏览器自动的查找高亮功能也比较弱，所以决定自己实现。

浏览器查找

主流浏览器提供了find方法，实现效果类似你按Ctrl+F。API：

  window.find(aString, aCaseSensitive, aBackwards, aWrapAround,  
                       aWholeWord, aSearchInFrames, aShowDialog);

参数说明参考：windows.find

基于此方法封装：

 function findSelect(win, search, view, restart){
    if(restart){
        win.getSelection().removeAllRanges();
    }
    if(!win.find(search,false,true,true) && search.length > 10){
        search = search.substr(0,10);
        if(!win.find(search,false,true,true)){
        return null;
        }
    }
    var node = win.getSelection().anchorNode;
    if(node) {
        var select = node.parentElement;
        if(view) select.scrollIntoViewIfNeeded();
        return select;
    }
    return null;
}

findSelect方法可查找并滚动到视图内。

简单情况：纯文本高亮

对一段文本（字符串），实现非常简单，直接查找即可，代码如下：

function hilightTexts(src, text, hiclass){
    if(!text || text.length==0) return src;
    var arr = [];
    var i = 0;
    hiclass = hiclass || 'red';
    while(ii){
        arr.push(src.substring(i,pos));
      }
      arr.push('');
      arr.push(text);
      arr.push('');
      i = pos + text.length;
    }
    return arr.join('');
}

上述实现中出于效率考虑，采用了indexOf查找，利用数组进行拼接。

多文本段情况

HTML中的文本段落因为样式的原因，往往被多个HTML标签分隔，如：

  综合台湾“中央社”等媒体6月13日报道
  蔡英文(图片来源：台媒)

算法描述如下：

查找所有文本段，文本段内不再包含HTML标签
对要查找的关键词（或实体）根据其名称长短排序，长的关键词优先匹配
对于每个文本段，从第一个关键词w[0]开始查找，如果没有匹配，则查找w[1]；如果找到，则采用类似hilightTexts的思想，将文本段拆分为3个部分：左边、当前词、右边部分。对左边的部分从下一个关键词开始递归匹配。对右边部分重复此操作。结束条件：待匹配文本为空或者没有需要匹配的关键词。将左边、当前词、右边的结果汇集，形成匹配结果。
第3步获得的匹配结果拼接，构成新的文档内容。

下面看下代码，首先利用DOM API查找所有文本段：

  function getTextsEsc0(node, arr){
    if(node.nodeType==3 && node.parentNode.nodeName!="ENT") {
        arr.push({p:node.parentNode, node:node, text:node.nodeValue});
    }
    else if(node.nodeType==1) {
       for(var child = node.firstChild; !!child; child = child.nextSibling){
            getTextsEsc0(child, arr);
       }
    }
 }

典型的递归结果，将结果保存到参数arr数组中。注意，对已有的ent节点不再查找。

递归查找关键词的代码：

  function tagEntsSeg(seg, ents, pos){
     if(seg=="" || pos>=ents.length) return [{t:seg}];
     var ent = ents[pos], tag = ent.label;
     var i = seg.indexOf(tag);
     if(ent.lang_en && !isBorder(i, i+tag.length, seg)) i = -1;
     if(i<0) return tagEntsSeg(seg, ents, pos+1);
      var arr = [];
      if(i>0) arr = arr.concat(tagEntsSeg(seg.substring(0,i), ents, pos+1));
      var cur = {n:tag};
      if(ent.id) cur.id = ent.name;
      if(ent.type) cur.type = ent.type;
      arr.push(cur);
      return arr.concat(tagEntsSeg(seg.substring(i+tag.length), ents, pos));
  }

返回的数组的元素为{t: 'text'} 或 {n:tag, id, type}
最后进行DOM替换：

function replaceText(p, node, segs, clz){
    var cNode = document.createElement("ents");
    p.appendChild(cNode);
    p.replaceChild(cNode, node);
    segs.forEach(function(item, i){
      if(item.t) {
        var tn = document.createTextNode(item.t);
        cNode.appendChild(tn);
      }
      else if(item.n){
        var en = document.createElement("ent");
        en.appendChild(document.createTextNode(item.n));
        en.setAttribute("class", item.type || clz || 'ent')
        if(item.id) en.setAttribute('d-entid', item.id);
        cNode.appendChild(en);
      }
    });
  }

几个问题

上述实现可以完善一下，支持不同的window（document默认为当前文档的）
DOM元素逐个替换是否太慢？可以测一下时间优化方式可以考虑：先构造DOM片段然后整体替换
如何匹配跨节点的元素，如
蔡英文
。浏览器find可以支持。

网页内容高亮的实现