Выделите перекрывающийся текст в JQuery - PullRequest
Новая
       172

Выделите перекрывающийся текст в JQuery

2 голосов
/ 16 марта 2010

У меня есть этот простой HTML: 

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

И эти фразы: 

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

В JQuery есть какой-то способ циклически проходить по списку фраз и выделять фразы по мере их появления в тексте, а также иметь перекрытие, выделенное цветом или границей и т. Д.

Я знаю, что есть простые маркеры, но это не поможет. Может быть, что-то с наложением помутнений? Спасибо!

Ответы [ 3 ]

2 голосов
/ 16 марта 2010

К сожалению, ни один из известных мне маркеров не может выполнить то, о чем вы просите, особенно потому, что HTML - это просто текст.

Перемещение продвинутых маркеров просто сведет три отдельных куска в единое целое и выделит все.

Если вам действительно нужно сделать что-то подобное, вы можете получить каждый кусок и сравнить, если он имеет какое-либо перекрытие. Затем, если он есть, удалите перекрывающуюся часть из каждого куска и создайте новую «перекрывающуюся» подсветку, если это имеет смысл.

1 голос
/ 30 июня 2015

Мне нужно было достичь чего-то похожего, и я много над этим работал. Я нашел решение примерно так.

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
    }
});
1 голос
/ 11 ноября 2014

Есть такая замечательная js штука, называемая anotaterjs , которая, вероятно, способна сделать это. Он поддерживает вложенные выделения и позволяет добавлять примечания к выделению.

enter image description here

...