在 JQuery 中突出显示重叠文本

Question

我有这个纯 HTML：

"Many things are in my room: a bed, a desk, and a computer."

和这些短语：

"things are"
"are in my room" 
"room: a bed"

在 JQuery 中，是否有某种方法可以循环遍历短语列表，并突出显示文本中出现的短语，并用颜色或边框等来划分重叠部分？

我知道有简单的荧光笔，但这并不能解决问题。也许是有重叠不透明度的东西？谢谢！

Answer 1

不幸的是，我所知道的荧光笔都不能满足您的要求，特别是因为 HTML 只是纯文本。

移动高级荧光笔只会将三个独立的块压缩成一个整体并突出显示所有内容。

如果您确实需要做类似的事情，您可以获取每个块并比较它是否有重叠。然后，如果有的话，从每个块中删除重叠部分并创建一个新的“重叠”突出显示（如果有意义的话）。

Answer 2

有一个名为 anotaterjs 的很棒的 js 东西，它可能能够做到这一点。它支持嵌套突出显示，并允许您向突出显示添加注释。

Answer 3

我必须实现类似的目标，并且我为此付出了很多努力。
我找到了类似这样的解决方案。

http://jsfiddle.net/pw9kkg2x/34/

String.prototype.setEvidence = function(option) {
    var _parent = option.parent; //Mandatory
    var _ele = option.element || undefined; //optional
    var _pos = option.position || undefined; //optional

    if (typeof this === 'object') {
        _searchKey = this;
        pos = {}
        if (typeof _pos == 'undefined') {

            _pos = {};
            _pos.begin = $("." + _parent).html().indexOf(_searchKey);

        }
        var _content_string = $("." + _parent).html();
        _content_string = _content_string.substring(0, _pos.begin) + '<span class="_tmp_' + _ele.name + ' _tmp_span"></span>' + _content_string.substring(_pos.begin);

        $("." + _parent).html(_content_string);

        pos = $('._tmp_' + _ele.name).offset();
        console.log(pos);

        $("." + _parent).html(function(index, html) {
            return html.replace('<span class="_tmp_' + _ele.name + ' _tmp_span"></span>', '');
        });

        $("." + _parent).parent().prepend('<code id="' + _ele.id + '"><span class="_code_string ' + _ele.name + '" style="left:' + pos.left + '">' + _searchKey + '</span></code>');

        $('#' + _ele.id).offset({
            top: pos.top,
            left: 0
        });

        $('#' + _ele.id + ' span').css('marginLeft', pos.left + 'px');

    }
}


var searchKey = "simply dummy";
var searchKey2 = "Ipsum is simply dummy";
var searchKey3 = "galley of type and scrambled";
var searchKey4 = "scrambled it to make a type";

searchKey.setEvidence({
    parent : 'container',
    element : {
        name: 'container1',
        id : 'trialId1',
        class : '',
    }
});
searchKey2.setEvidence({
    parent : 'container',
    element : {
        name: 'container2',
        id : 'trialId2',
        class : '',
    }
});

searchKey3.setEvidence({
    parent: 'container',
    element: {
        name: 'container2',
        id: 'trialId3',
        class: '',
    },
    position: {
        begin: 230,
        end: 258
    }
});

searchKey4.setEvidence({
    parent: 'container',
    element: {
        name: 'container1',
        id: 'trialId4',
        class: '',
    },
    position: {
        begin: 249,
        end: 276
    }
});