需求分析
在一些自然语言处理和知识图谱相关的应用中，需要对文本中的实体进行高亮显示，效果如下图：
内容高亮示意图
具体需求：
- 支持多个自定义关键词的高亮
- 支持自定义高亮颜色和样式
- 可区分不同类型的实体，如常见的实体类型人物、地点、机构等，需要以不同颜色高亮。
方案设计
由于一时没有找到现成的库，浏览器自动的查找高亮功能也比较弱，所以决定自己实现。
浏览器查找
主流浏览器提供了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(i<src.length){
var pos = src.indexOf(text, i);
if(pos<i) {
arr.push(src.substring(i));
break;
}
if(pos>i){
arr.push(src.substring(i,pos));
}
arr.push('<span class="'+ hiclass+'">');
arr.push(text);
arr.push('</span>');
i = pos + text.length;
}
return arr.join('');
}
上述实现中出于效率考虑，采用了indexOf查找，利用数组进行拼接。
多文本段情况
HTML中的文本段落因为样式的原因，往往被多个HTML标签分隔，如：
<p>综合台湾“中央社”等媒体6月13日报道</p>
<p><span>蔡英文</span>(图片来源：台媒)</p>
算法描述如下：
- 查找所有文本段，文本段内不再包含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片段 然后整体替换
- 如何匹配跨节点的元素，如<div>蔡<span>英文</span></div>。浏览器find可以支持。
