jquery - 1 行で返されるタグによる検索結果

Question

<div>タグからテキストを検索しています。問題は、検索するとすべての<div>データが 1 行に表示されることです。

これが私のフィドルです。 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);
    }
}