jquery - 正则表达式替换从 html 中删除

Question

我有这样的文字：

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

我正在尝试创建一个简单的搜索程序，但是当我的脚本找到匹配项时，所有文本都出现在一行上，匹配的术语突出显示。我希望突出显示该术语，但将文本保持在单独的行中。

这里搜索按钮事件代码调用了这个函数：

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/

Answer 1

在您的searchAndHighlight功能中，您正在执行以下操作：

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

更改text()为html()。由于它text而不是html，它无法识别br标签。

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

演示：http: //jsfiddle.net/hungerpain/HQq9Y/3/