时间戳

首页 > 解决方案 > 使用 JQuery 搜索文本并突出显示

jquery - 使用 JQuery 搜索文本并突出显示

问题描述

我正在尝试搜索文本并在 HTML 元素中突出显示它。但它不能正常工作。仅突出显示搜索文本的第一个字符。

 $(".modal_search").on("keyup", function () {            
            var Id = $(this).attr('id');
            var searchItem = $(this).val();

            $('#textModal_'+Id).find(".highlight").removeClass("highlight");

            var searchText = $('#textModal_'+Id).html();

            var reg = new RegExp(searchItem, 'gi');            

            var txt = searchText.replace(reg, function(str) {
              return "<span class='highlight'>" + str + "</span>"
            });

            if(searchItem != "") {
              $('#textModal_'+Id).html(txt);
            }
        });

此代码也没有保留内容的格式。

标签： jquery

解决方案

嗨，您可以使用以下函数在 div 中查找文本。

jQuery.fn.highlight = function (pat) {
    function innerHighlight(node, pat) {
        var skip = 0;
        if (node.nodeType == 3) {
            var pos = node.data.toUpperCase().indexOf(pat);
            if (pos >= 0) {
                var spannode = document.createElement('span');
                spannode.className = 'highlight';
                var middlebit = node.splitText(pos);
                var endbit = middlebit.splitText(pat.length);
                var middleclone = middlebit.cloneNode(true);
                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);
                skip = 1;
            }
        } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
            for (var i = 0; i < node.childNodes.length; ++i) {
                i += innerHighlight(node.childNodes[i], pat);
            }
        }
        return skip;
    }
    return this.length && pat && pat.length ? this.each(function () {
        innerHighlight(this, pat.toUpperCase());
    }) : this;
};
jQuery.fn.removeHighlight = function () {
    return this.find("span.highlight").each(function () {
        this.parentNode.firstChild.nodeName;
        with(this.parentNode) {
            replaceChild(this.firstChild, this);
            normalize();
        }
    }).end();
};

var $finder = $('#formtext-finder'),
    $field = $finder.children().first(),
    $clear = $field.next(),
    $area = $(document.body),
    $viewport = $('html, body');

$field.on("keyup", function () {
    $area.removeHighlight().highlight(this.value); 
    $viewport.scrollTop($area.find('span.highlight').first().offset().top - 50);
});
$clear.on("click", function () {
    $area.removeHighlight(); 
    $field.val('').trigger("focus"); 
    $viewport.scrollTop(0); 
    return false;
});

这是一个工作示例。

推荐阅读