Question

我正在搜索<div>标记的文字。问题是，当我搜索时，我的所有<div>数据都会出现在一行中。

在小提琴中，键入中断，然后按搜索。为什么<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);
    }
}

Answer 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>');

按标签搜索结果在一行中返回

1 个答案: