0

ここにサンプルの jsfiddle があります。

いくつかの div クラスが作成されていることがわかります。テキストを検索して強調表示された回答を取得できますが、div の値を検索して、その div 全体 (この場合は正方形のボックス) を強調表示したり、色で塗りつぶしたりしたいと考えています。

テキストを分離するために私が持っているjavascriptは次のとおりですが、上記の問題を機能させることはできません...

function doSearch(text) {
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
        sel.collapse(document.body, 0);

        while (window.find(text)) {
            document.getElementById("button").blur();
            document.execCommand("HiliteColor", false, "yellow");
            sel.collapseToEnd();
        }
        document.designMode = "off";
    } else if (document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        while (textRange.findText(text)) {
            textRange.execCommand("BackColor", false, "yellow");
            textRange.collapse(false);
        }
    }
}

jQueryでこれをより適切に行うことはできますか?

4

3 に答える 3

2

純粋なJSを使用したソリューションは次のとおりです。

jsフィドル

function doSearch(text) {
    var divs = document.getElementById('content').getElementsByTagName('div');
    var pattern = new RegExp(text);
    for (var i in divs) {
        if (pattern.test(divs[i].innerHTML)) {
            var classes = divs[i].className.split(' ');
            classes.push('highlight');
            divs[i].className = classes.join(' ');
        }
    }
}

そして、CSS クラスを追加します。

.highlight {
    background-color: yellow;
}
于 2013-08-28T21:22:32.103 に答える
2

これはjqueryで更新されたフィドルです：http://jsfiddle.net/2e5HZ/2/

function doSearch(text) {    
    $("#content").find("div").each(function() {
        var div = $(this);
        if (div.html() == text) {
            div.addClass('highlight');
        } else {
            div.removeClass('highlight');
        }
    });
}

私がしたことは、コンテンツ内のすべての div を見つけることでした。その div の html が検索に一致した場合は、ハイライト クラスを追加します。

.highlight { background: yellow; border: 2px solid red; }

そうでない場合は、ハイライト クラスを削除します (リセット)。

于 2013-08-28T21:14:31.360 に答える
2

ここであなたのフィドルをフォークしました。CSS を 1 行 (新しいクラス: ハイライト) 追加し、doSearch() 関数を次の 2 行の jQuery に縮小しました。

$('#content div').removeClass('highlight');
$('#content div:contains(' + text + ')').addClass('highlight');

最初にコンテンツ div 内のすべての div からハイライト クラスを削除し、次に目的のテキストを含む div のいずれかにクラスを追加します。

于 2013-08-28T21:15:29.817 に答える