文章关键字标记方案（内容标记）

有些公司的业务需要把一篇篇文章里面的关键字标记出来，如果不符合的文章就不发布出去，标记文章里面的关键字有多种方案，比如：使用svg进行标记；使用dom进行标记；使用canvas进行标记。

我个人推荐使用Dom进行标记，符合Dom操作的习惯，而且简单易用，易于理解，同时不需要深入了解画图类的技术底层。

几个重要的方法，仅供参考：

mark: function(div, text, processer) {      //搜索的dom节点，关键字，插入的dom节点
        return new Promise(function(resolve, reject) {
            setTimeout(function() {
                window.focus();

                let rTemp = document.createRange();
                rTemp.selectNodeContents(div);
                if (rTemp.simpleText().indexOf(text)<0) { // 不包含
                    return resolve();
                }
                let range = null;
                search(div, function(e, offset) {
                    if (e == BREAK_RANGE) {
                        range = null;
                        return;
                    }
                    rTemp.setStart(e, offset);   //设置文章选区的起始位置
                    if (!range && rTemp.simpleText().indexOf(text)==0) {
                        range = document.createRange();
                        range.setStart(e, offset);
                    } else if (range) {     //跨标签时，因为range一直有，所以一定会找到跟标记内容相等的终点位置
                        range.setEnd(e, offset);   
                        if (range.simpleText()==text) {
                            let r = processRange(div, range, processer);
                            range = null;
                            return r;
                        }
                    }
                });
                document.getSelection().removeAllRanges();
                resolve();
            }, 16);
        });
    }

function search(node, doSth) {
    let root = node;
    function next(node) {
        if (node == root) return null;
        if (node.nextSibling) {
            return node.nextSibling;
        }
        return next(node.parentNode);
    }
    outer: while (node) {
        if (node.nodeType==1) {   //元素节点，比如div
            if (/^(script|style|noscript)$/i.test(node.nodeName)) {
                node = next(node);
            } else if (/^(input|object|audio|video|embed|select)$/i.test(node.nodeName)) {
                node = next(node);
                doSth(BREAK_RANGE);
            } else if ($(node).is('.mark-txt')) {
                node = next(node);
                doSth(BREAK_RANGE);
            } else if (node.childNodes && node.childNodes.length) {
                node = node.childNodes[0];
            } else {
                node = next(node);
            }
        } else if (node.nodeType == 8) {   //一个comment节点
            // 注释节点
            node = next(node);
        } else if (node.nodeType == 3) {   //文本节点
            let s = node.nodeValue;
            inner: for (let i=0; i<=s.length; i++) {
                let end = doSth(node, i);
                if (end) {
                    node = end;
                    break inner;
                }
            }
            node = next(node);
        }
    }
}

function processRange(div, range, processer) {
    let s = document.getSelection();
    s.removeAllRanges();
    s.addRange(range);
    document.execCommand('createLink', false, `${vhref}`);
    let list = document.querySelectorAll(`a[href="${vhref}"]`);
    if (!list.length) return;
    list = [].slice.call(list);
    list = mergeElement(list);
    list = list.map(function(oNode) {
        let childs = [].slice.call(oNode.childNodes);
        let last = childs[childs.length-1];
        if (!(oNode.textContent||'').trim() || oNode.querySelector('img')) {
            while (childs.length && oNode.parentNode) {
                oNode.parentNode.insertBefore(childs.shift(), oNode);
                oNode.parentNode.removeChild(oNode);
            }
            return last;
        } else {
            let newNode = processer(childs);
            oNode.parentNode.replaceChild(newNode, oNode);
            return newNode;
        }
    });
    return list.pop();
}

function commonParent(a, b) {
    if (contains(a, b)) {
        return a;
    }
    if (regBlock.test(window.getComputedStyle(a)['display'])) {
        return null;
    }
    let p = a.parentNode;
    while (true) {
        if (contains(p, b)) {
            return p;
        }
        if (regBlock.test(window.getComputedStyle(p)['display'])) {
            return null;
        }
        p = p.parentNode;
    }
}
function unwrap(a, index) {
    let p = a.parentNode.cloneNode();
    p.removeAttribute('id');
    p.innerHTML = '';
    while (a.childNodes.length) {
        p.appendChild(a.childNodes[0]);
    }
    a.appendChild(p);
    if (index!=0) {
        a.parentNode.parentNode.insertBefore(a, a.parentNode);
    } else {
        $(a).insertAfter(a.parentNode);
    }
}
function importChild(a, b) {
    while (b.childNodes.length) {
        a.appendChild(b.childNodes[0]);
    }
}
function mergeElement(list) {
    let n = [];
    while (list.length>1) {
        let a = list.shift();
        let b = list.shift();
        let p = commonParent(a, b);
        if (p) {
            list.unshift(p);
        } else {
            n.push(a, b);
        }
    }
    list = n.concat(list);
    list = list.map(function(node) {
        let aList = [].slice.call(node.querySelectorAll(`a[href="${vhref}"]`));
        if (aList.length<1) return node;
        if (aList.length<2) return aList[0];
        aList.forEach((a, i)=> {
            while (a.parentNode != node) {
                unwrap(a, i);
            }
        });
        let s = aList[0];
        let e = aList[aList.length-1];
        let next = s.nextSibling;
        console.log('aList:', aList);
        while (next) {
            let index = aList.indexOf(next);
            if (index>-1) {
                importChild(s, next);
                next.parentNode.removeChild(next);
                if (next == e) {
                    return s;
                }
            } else {
                s.appendChild(next);
            }
            next = s.nextSibling;
        }
        return s;
    });
    return list;
}