如何使用 javascript 在不丢失文本大小写的情况下突出显示文本？

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/。编码愉快！