1

次のようなテキストがあります。 

test<br>
test<br>
test<br>
test<br>

簡単な検索プログラムを作成しようとしていますが、スクリプトが一致を見つけると、すべてのテキストが 1 行に表示され、一致した用語が強調表示されます。用語を強調表示したいが、テキストを別の行に保持したい。

ここでは、検索ボタン イベント コードがこの関数を呼び出します。

function searchAndHighlight(searchTerm) {
    if (searchTerm) {
        var searchTermRegEx, matches;
        var selector = "#realTimeContents";
        $(selector + ' span.match').each(function () {
            $(this).replaceWith($(this).html());
        });
        try {
            searchTermRegEx = new RegExp('(' + searchTerm + ')', "ig");
        } catch (e) {
            return false;
        }
        $('.highlighted').removeClass('highlighted');
        matches = $(selector).text().match(searchTermRegEx);
        if (matches !== null && matches.length > 0) {
            var txt = $(selector).text().replace(searchTermRegEx, '<span class="match">$1</span>');
            $(selector).html(txt);
            searchIndex++;
            $('.match:first').addClass('highlighted');
            //if($('.match').eq(searchIndex).offset().top > $('#realTimeContents').height()-10){
            $('#realTimeContents').animate({
                scrollTop: $('.match').eq(searchIndex).get(0).offsetTop
            });

            return true;
        } else {
            alert('Search not found.');
        }
        return false;
    }
    return false;
}

ここに問題を示すフィドルがあります: http://jsfiddle.net/HQq9Y/2/

4

1 に答える 1