突出显示 JQuery 中的重叠文本答案

【问题标题】：Highlight overlapping text in JQuery突出显示 JQuery 中的重叠文本
【发布时间】：2015-06-30 19:57:27
【问题描述】：

我有这个纯 HTML：

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

还有这些短语：

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

在 JQuery 中，是否有某种方法可以循环遍历短语列表，并在短语出现在文本中时突出显示它们，并通过颜色或边框等来描绘重叠？

我知道有一些简单的荧光笔，但这并不能解决问题。也许有覆盖不透明的东西？谢谢！

【问题讨论】：

正如 Paulo Santos 指出的那样，这真的很重要。你能给出一些你需要这个特殊功能的理由吗
这是为了突出页面中风格不正确的短语（通常它们重叠）。

标签： jquery highlighting

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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
    }
});

【讨论】：