突出顯示從文本輸入的div中的所有匹配詞

我做了一個功能，突出顯示div中的匹配詞。但是如果有兩個相同的單詞用不同的單詞分隔，那麼只有第一個單詞是高亮的。例如，如果搜索標準是「燒傷」一詞，而文中則是「燒傷寶寶燒傷」一句，我想讓它突出顯示「燒傷」。這jsFiddle演示它如何只突出第一個「燒」。下面的代碼也是。任何幫助非常感謝。謝謝閱讀。突出顯示從文本輸入的div中的所有匹配詞

CSS

.highlight{ 
      font-weight:bold; 
      color:green; 
}

HTML

<input id = "search" type ="text" value = "burn"> 
<div class = "searchable">burn baby burn</div>

的JavaScript

if($('#search').val().length !== 0){ 
    $('.searchable').each(function(){ 
    $(this).html($(this).html().replace($('#search').val(),"<span class = 'highlight'>"+$('#search').val()+"</span>")); 
}); 
}

來源

2014-03-19 user2014429

您可以通過正則表達式將替換（）而不是字符串，與G修飾符進行更換進行全球比賽。

if($('#search').val().length !== 0){ 
    $('.searchable').each(function(){ 
    var search_value = $("#search").val(); 
    var search_regexp = new RegExp(search_value, "g"); 
    $(this).html($(this).html().replace(search_regexp,"<span class = 'highlight'>"+search_value+"</span>")); 
}); 
}

來源

2014-03-19 00:19:15 Danny

輝煌。完美的答案。非常感謝 – user2014429

+1我會記住這一點。 –

這是您的工作jsfiddle。基本上，從div中獲取文本，在空間上分割文本，遍歷單詞並查看是否匹配。

var term = $('#search').val().trim().toLowerCase(); 
if (term.length > 0) { 
    var source = $('.searchable').text(); 
    var words = source.split(' '); 
    var output = ''; 
    $.each(words, function(idx, word) { 
     if (term === word.toLowerCase()) { 
      output += '<span class="highlight">' + word + '</span> '; 
     } else { 
      output += word + ' '; 
     } 
    }); 

    $('.searchable').html(output); 
}

來源

2014-03-19 00:24:02 Malevolence

嗯。這個案子呢？ http://jsfiddle.net/qhLQ7/1/ –

+1感謝您的代碼。 – user2014429

取regex special characters照顧。
保持大寫&小寫。

所以照顧上面的東西用不區分大小寫（在大多數情況下，這是需要的，否則只是刪除「I」），這裏是最後的代碼...

if ($('#search').val().length !== 0) { 
    $('.searchable').each(function() { 
     //Handle special characters used in regex 
     var searchregexp = new RegExp($("#search").val().replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), "gi"); 

     //$& will maintain uppercase and lowercase characters. 
     $(this).html($(this).html().replace(searchregexp, "<span class = 'highlight'>$&</span>")); 
    }); 
}

And a fiddle 。

來源

2017-08-05 07:03:18

突出顯示從文本輸入的div中的所有匹配詞

回答

相關問題