Javascript：搜索和突出顯示包含HTML標記

所以我做這段代碼時，當用戶在文本框中搜索查詢時，它會突出顯示內容中某處的查詢並重點關注該查詢的第一次出現。問題在於，當用戶輸入類似li或div這些是HTML標記時，這些也會顯示爲搜索結果。例如，這裏是我的HTML標記Javascript：搜索和突出顯示包含HTML標記

<div class="col-lg-6" id="search-area"> 
    <div class="input-group"> 
     <input type="text" id="search-term" class="form-control"> 
     <span class="input-group-btn"> 
     <button id="search-button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
     </span> 
    </div><!-- /input-group --> 
</div> 

<h3>Did we miss something? Have any more FAQs to add? Contact us directly at [email protected]</h3>

這裏是我的js

function searchAndHighlight(searchTerm, selector) { 
if(searchTerm) { 

    var selector = selector || "#mainContainer"; 
    var searchTermRegEx = new RegExp(searchTerm,"ig"); 
    var matches = $(selector).text().match(searchTermRegEx); 
    if(matches) { 
     $('.highlighted').removeClass('highlighted');  //Remove old search highlights 
      $(selector).html($(selector).html() 
       .replace(searchTermRegEx, "<span class='highlighted'>"+searchTerm+"</span>")); 
     if($('.highlighted:first').length) {    //if match found, scroll to where the first one appears 
      $(window).scrollTop($('.highlighted:first').position().top); 


     } 
     return true; 

    } 
    } 

    return false; 


    } 

    $(document).ready(function() { 
    $('#search-button').on("click",function() { 
    if(!searchAndHighlight($('#search-term').val())) { 
     alert('No results found for query "'+$('#search-term').val()+'".'); 
    }else{ 
     alert($("span[class='highlighted']").length); 
    } 
    }); 

    $("#search-term").keypress(function(event) { 
    if (event.which == 13) { 
     if(!searchAndHighlight($('#search-term').val())) { 
      alert('No results found for query "'+$('#search-term').val()+'".'); 
     }else{ 
      alert($("span[class='highlighted']").length); 
     } 
    } 
    }); 


    });

如果用戶輸入H3例如，其結果將是

<**h3**>Did we miss something? Have any more FAQs to add? Contact us directly at [email protected]</**h3**>

不該」它說沒有找到結果？

來源

2013-12-16 Growlithe

我忘記，這裏是我的js文件 – Growlithe

你能提供一個jsfiddle嗎？ – Shahe

下面是一個香草JavaScript函數，我用它來強調內部text nodes文本：

function highlightText(text, node) { 
    var searchText = $.trim(text).toLowerCase(), 
     currentNode = node, 
     matchIndex, newTextNode, newSpanNode; 
    while ((matchIndex = currentNode.data.toLowerCase().indexOf(searchText)) >= 0) { 
     newTextNode = currentNode.splitText(matchIndex); 
     currentNode = newTextNode.splitText(searchText.length); 
     newSpanNode = document.createElement("span"); 
     newSpanNode.className = "highlight"; 
     currentNode.parentNode.insertBefore(newSpanNode, currentNode); 
     newSpanNode.appendChild(newTextNode); 
    } 
}

要找到你的HTML中的文本節點可以使用jQuery.contents()功能。這裏有一個例子：

var text = "faq"; 
$("body *").contents().filter(function() { 
    return this.nodeType === this.TEXT_NODE; 
}).each(function() { 
    highlightText(text, this); 
});

Demo here

來源

2013-12-16 08:19:34

試圖改變你的代碼interate在所有的子節點，並檢查他們的VAL（），而不是他們的HTML（）：

.... 
    var selector = selector || "#mainContainer"; 
    var searchTermRegEx = new RegExp(searchTerm,"ig"); 
    var matches = []; 

    $.each($(selector).children(), function(index, item){ 
     matches.push($(item).val().match(searchTermRegEx)); 
    }); 

    if(matches) {....

來源

2013-12-16 08:25:25

Javascript：搜索和突出顯示包含HTML標記

回答

相關問題