Highlight overlapping text in JQuery

I've got this plain HTML:

"Many things are in my room: a bed, a desk, and a computer开发者_如何学JAVA."

And these phrases:

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

In JQuery, is there some way to loop through the phrase list, and highlight the phrases as they appear in the text, and have the overlap delineated by color, or border, etc?

I know there are simple highlighters but that won't do the trick. Maybe something with overlaying opacities? Thanks!

Unfortunately none of the highlighters I know can do what you are asking, specially because the HTML is simply plain text.

Move advanced highlighters would simply condense the three separated chunks into a single unity and highlight everything.

If you really need to do something like that you could get each chunk and compare if it has any overlapping. Then if it has, remove the overlapping part from each chunk and create a new "overlapped" highlight, if that makes sense.

There is this great js thinggy called anotaterjs that's probably able to do just that. It supports nested highlightings and allows you to add a note to your highlighting.

I had to achieve something similar and I worked on it a lot. I found a solution something like this.

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