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/

正则表达式替换从html删除<br/>

1 个答案: