2

私はこのプレーンなHTMLを持っています：

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

そしてこれらのフレーズ：

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

JQueryでは、フレーズリストをループして、テキストに表示されているフレーズを強調表示し、オーバーラップを色や境界線などで表す方法はありますか？

単純な蛍光ペンがあることは知っていますが、それではうまくいきません。不透明度を重ね合わせたものでしょうか？ありがとう！

4

3 に答える 3

2

残念ながら、私が知っている蛍光ペンはどれも、特にHTMLが単なるプレーンテキストであるため、あなたが求めていることを実行できません。

高度な蛍光ペンを移動すると、3つの分離されたチャンクが1つの単一に凝縮され、すべてが強調表示されます。

本当にそのようなことをする必要がある場合は、各チャンクを取得して、重複があるかどうかを比較できます。次に、ある場合は、各チャンクから重複部分を削除し、それが理にかなっている場合は、新しい「重複」ハイライトを作成します。

于 2010-03-16T09:31:10.803 に答える
1

anotaterjsと呼ばれるこの素晴らしいjsシンギーがあり、おそらくそれを行うことができます。ネストされたハイライトをサポートし、ハイライトにメモを追加できます。

ここに画像の説明を入力してください

于 2014-11-10T21:00:10.030 に答える
1

私は似たようなことを成し遂げなければならず、それにたくさん取り組みました。私はこのような解決策を見つけました。

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
    }
});
于 2015-06-30T11:57:27.123 に答える