代码之家 › 专栏 › 技术社区 › Celso Soares

如何使用javascript突出显示文本而不丢失文本大小写?

highlight filtering text html jquery

Celso Soares · 技术社区 · 9 年前

我正在使用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>

Java脚本:

$(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”,现在我有“洛rem”。我知道问题出在哪里。这是因为我替换了列表项上的整个文本。

有没有更好的方法来做到这一点,而不丢失原始文本案例?

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

1 回复 | 直到 9 年前

Andrew Cheong 9 年前

对

在您的 //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/ .编码快乐!