Question

我想在答案部分使用html标签，但是当我使用搜索时，代码正在拉动。我对JavaScript几乎没有经验，所以任何建议都会非常有用

JavaScript

$('h3.Topic').click(function () {
    $(this).next().toggle(300);
});
$('h4.Question').click(function () {
    $(this).next().toggle(300);
});
$('#ExpandAll').click(function () {
    $('#FAQ').children('div.TopicContents').show(300).children('div.Answer').show(300);
});
$('#CollapseAll').click(function () {
    $('#FAQ').children('div.TopicContents').hide(300).children('div.Answer').hide();
});
jQuery.expr[':'].Contains = function (a, i, m) {
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$('#SearchFAQ').click(function () {
    $('#FAQ').children('div.TopicContents').hide().children('div.Answer').hide();
    if ($('#FAQSearch').val() != '') {
        $('div.Answer:Contains(' + $('#FAQSearch').val().toUpperCase() + ')').show().parent().show(300);
        try {
            $('.highlight').removeClass("highlight");
            $('div.Answer:Contains(' + $('#FAQSearch').val().toUpperCase() + ')').each(function () {
                $(this).html(
                    $(this).html().replace(
                        new RegExp($('#FAQSearch').val(), "ig"),
                        function (match) {
                            return '<span class="highlight">' + match + '</span>';
                        }
                    )
                )
            });
        } catch (err) {}
    }
    return false;
});

Answer 1

尝试将new RegExp($('#FAQSearch').val(), "ig")替换为new RegExp('(' + $('#FAQSearch').val() + ')(?![^<]*>)', "ig")。

DEMO：http://jsfiddle.net/4PWRj/

var $searchArea = $('#search-area');

$('input').keyup(function () {
    var value = this.value.trim(), rx;

    $searchArea.find('.highlight').each(function () {
        this.parentNode.replaceChild(document.createTextNode(this.textContent), this);
    });

    if (!value) return;

    rx = new RegExp('(' + this.value + ')(?![^<]*>)', "ig");

    $searchArea.html($searchArea.html().replace(rx, '<span class="highlight">$1</span>'));
});

JavaScript搜索功能也在搜索html代码

1 个答案: