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

Question

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

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>'
);

...当您可以简单地用对找到的文本 </code> 的反向引用替换它时，像这样： <pre><code>return $(this).html().replace( new RegExp( "(" + $(self).val() + ")" , 'gi'), '' );

您还需要修复您的 //Reset highlight 代码，同样，采取这个...

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

并添加一个捕获组 () 并再次引用反向引用 </code>: <pre><code>return $(this).html().replace( new RegExp( '('+highlightedText+')' , 'gi'), '' );

已更新 fiddle：https://jsfiddle.net/vmwj5w4L/6/。编码愉快！

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

How to highlight text without losing the text case using javascript?

jquery

html

text

filtering

highlight