如何突出顯示文本而不會丟失使用javascript的文本大小寫？

我正在開發一個使用JQuery來完成這項工作的HTML列表過濾器。其目的是隱藏女巫文字與插入輸入文字不符的項目。如何突出顯示文本而不會丟失使用javascript的文本大小寫？

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/

來源

2016-01-19 Celso Soares

這是否需要考慮任何可能的大寫字母，或只是每個單詞的第一個字符？ – ann0nC0d3r

任何可能的大寫字母 –

**您不需要重新轉換輪子**，只需使用現有組件（如[mark.js]（https://markjs.io/））即可。爲你的用例看看[這個小提琴]（https://jsfiddle.net/julmot/bs69vcqL/）。 – dude

是。

在你//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/。快樂的編碼！

來源

2016-01-19 16:43:09

很好的答案！ +1 – ann0nC0d3r

太棒了！但你可以看看這裏嗎？ https://jsfiddle.net/vmwj5w4L/5/ 嘗試在輸入中輸入「special」。你可以認爲該項目上的所有其他「s」都是大寫的。 –

查看我的更新。您需要相應地修復//重置高亮。 –

如何突出顯示文本而不會丟失使用javascript的文本大小寫？

回答

相關問題