0

我正在从<div>标签中搜索文本。问题是当我搜索时，我的所有<div>数据都集中在一行。

这是我的小提琴。 http://jsfiddle.net/Fc4Sg/

在小提琴中，输入break然后按搜索。为什么<div>内容不保持其格式？

这是我的代码：

var searchIndex = -1;
var searchTermOld ='';

$(document).ready(function(){
    $('.searchbox').on('change',function(){
        if($(this).val()===''){
            var selector = "#realTimeContents";
            $(selector+' span.match').each(function(){
                $(this).replaceWith($(this).html());
            });
        }

        searchIndex = -1;
        $('.searchNext').attr("disabled", "disabled");
        $('.searchPrev').attr("disabled", "disabled");
        searchTermOld = $(this).val();
    });

    $('.searchbox').on('keyup',function(){
        var selector= "#realTimeContents";
        if($(this).val()===''){
            $(selector+' span.match').each(function(){
                $(this).replaceWith($(this).html());
            });
        }

        if($(this).val() !== searchTermOld){
            $(selector+' span.match').each(function(){
                $(this).replaceWith($(this).html());
            });

            searchIndex = -1;
            $('.searchNext').attr("disabled", "disabled");
            $('.searchPrev').attr("disabled", "disabled");                              
        }
    });

    $('.search').on('click',function(){
        if(searchIndex == -1){
            var searchTerm = $('.searchbox').val();
            if(searchTerm==''){
                PG_alert("Please Insert Text.")
                return;
            }

            searchAndHighlight(searchTerm);
        }
        else
            searchNext();

        if($('.match').length >1){
            $('.searchNext').removeAttr("disabled");
            $('.searchPrev').removeAttr("disabled");
        }
    });

    $('.searchNext').on('click',searchNext);
    $('.searchPrev').on('click',searchPrev);
});

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 > $(window).height()-10){
                    $(document).scrollTop($('.match').eq(searchIndex).offset().top);
                }

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

            return false;
    }

    return false;
}

function searchNext(){
    searchIndex++;
    if (searchIndex >= $('.match').length)
        searchIndex = 0;

    $('.highlighted').removeClass('highlighted');
    $('.match').eq(searchIndex).addClass('highlighted');

    if($('.match').eq(searchIndex).offset().top > $(window).height()-10){
        $(document).scrollTop($('.match').eq(searchIndex).offset().top);
    }
}

function searchPrev(){
    searchIndex--;
    if (searchIndex < 0)
        searchIndex = $('.match').length - 1;
    $('.highlighted').removeClass('highlighted');
    $('.match').eq(searchIndex).addClass('highlighted');

    if($('.match').eq(searchIndex).offset().top > $(window).height()-10){
        $(document).scrollTop($('.match').eq(searchIndex).offset().top);
    }
}
4

1 回答 1

1

问题是这一行：

var txt = $(selector).text().replace(searchTermRegEx, '<span class="match">$1</span>');

您没有保留作为原始文本一部分的 html 标记。当您检索 .text() 时，您会得到一个删除了所有标签的结果。要解决此问题，您只需使用文本的 html 代替：

var txt = $(selector).html().replace(searchTermRegEx, '<span class="match">$1</span>');
于 2013-07-25T17:33:43.557 回答