jquery - 突出显示 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

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

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
    }
});