Question

我正在使用JQuery开发一个HTML列表过滤器来完成这项工作。目标是隐藏文本与输入中插入的文本不匹配的项目。

HTML：

<div class="search-form">
  <form method="post">
    <input id="sntndr-search-txt" type="text" class="search-txt" placeholder="Filter..." data-search-id="accounts-filter">
  </form>
</div>                      
<ul class="accounts-list" data-search-list="accounts-filter">
  <li data-account-id="9432657645">
    <a href="#" class="account">
      <div class="title">Lorem Ipsum</div>
      <div class="description">004900029089 232</div>
    </a>
  </li>
  <li data-account-id="35532436">
    <a href="#" class="account">
      <div class="title">Special account</div>
      <div class="description">543634523445 232</div>
    </a>
  </li>
</ul>

使用Javascript：

$(function() {
    //Data search
    $('*[data-search-id]').on('keyup', function(event ) {
        var listToBeSearched = $('*[data-search-list='+$(this).attr('data-search-id')+']');
        var self = this;

        //Hide all items
        $('li', listToBeSearched).hide();
        $(listToBeSearched.find('li')).each(function(index, item) {

            //Reset highlight
            var highlightedText = $('b.highlight', item).eq(0).text();
            $(item).html(function() {
                return $(this).html().replace(new RegExp( '<b class="highlight">'+highlightedText+'</b>' , 'gi'), highlightedText);
            })

            //Set highlight
            $(':not(:has(*))', item).html(function() {
                return $(this).html().replace(new RegExp( "(" + $(self).val() + ")" , 'gi'), '<b class="highlight">'+$(self).val()+'</b>');
            });

            //Show the matched items
            var currentItemText = $(item).text();
            if(currentItemText.toString().toLowerCase().indexOf($(self).val().toLowerCase()) != -1) {
                $(item).show();
            }
        })

        return false;
    });
});

问题是当我尝试突出显示列表项上的文本时，我丢失了文本案例。例如，我正在寻找“lorem”，我在哪里“Lorem”，现在我有“lorem”。我知道问题出在哪里。这是因为我替换了列表项上的整个文本。

有没有更好的方法可以做到这一点而不会丢失原始文本案例？

您可以在此处测试代码： JSFiddle - https://jsfiddle.net/vmwj5w4L/

Answer 1

是

在//Set highlight代码中，您使用$(self).val()替换找到的文字...

return $(this).html().replace(
    new RegExp( "(" + $(self).val() + ")" , 'gi'),
    '<b class="highlight">'+$(self).val()+'</b>'
);

...当您可以简单地将其替换为完全找到的文本$1的反向引用时，就像这样：

return $(this).html().replace(
    new RegExp( "(" + $(self).val() + ")" , 'gi'),
    '<b class="highlight">$1</b>'
);

你也需要修复你的//Reset highlight代码，同样地，这个......

return $(this).html().replace(
    new RegExp( '<b class="highlight">'+highlightedText+'</b>' , 'gi'),
    highlightedText
);

并添加捕获组()并再次引用反向引用$1：

return $(this).html().replace(
    new RegExp( '<b class="highlight">('+highlightedText+')</b>' , 'gi'),
    '$1'
);

更新了小提琴：https://jsfiddle.net/vmwj5w4L/6/。快乐的编码！

如何使用javascript突出显示文本而不丢失文本案例？

1 个答案: