如何打开p标签查找与搜索框匹配的文本，否则p标签应该禁用

Question

我必须创建一个包含搜索框，标题和段落描述的搜索内容。默认情况下，描述是禁用的，当我输入一些与描述文本匹配的文本时，应该打开描述段落标记。一些匹配的演示是这样的：

[小提琴] [1]

但在这个默认p标签应该被禁用，将只在搜索文本匹配可见。

function highlightSearch() { 
 
    var text = document.getElementById("query").value; 
 
    var query = new RegExp("(\\b" + text + "\\b)", "gim"); 
 
    var e = document.getElementById("searchtext").innerHTML; 
 
    var enew = e.replace(/(<span>|<\/span>)/igm, ""); 
 
    document.getElementById("searchtext").innerHTML = enew; 
 
    var newe = enew.replace(query, "<span>$1</span>"); 
 
    document.getElementById("searchtext").innerHTML = newe; 
 
\t 
 
}

#searchtext span{ 
 
    background-color:#FF9; 
 
    color:#555; 
 
} 
 

 
div { 
 
    padding: 10px; 
 
}

<div><h2>Find and highlight text in document</h2> 
 
<form action="" method="" id="search" name="search"> 
 
<input name="query" id="query" type="text" size="30" maxlength="30"> 
 
<input name="searchit" type="button" value="Search" onClick="highlightSearch()"> 
 
</form></div> 
 
<div id="searchtext"> 
 
<p>JavaScript is the programming language of the Web. The overwhelming majority of 
 
modern websites use JavaScript, and all modern web browsers—on desktops, game 
 
consoles, tablets, and smart phones—include JavaScript interpreters, making Java- 
 
Script the most ubiquitous programming language in history. JavaScript is part of the 
 
triad of technologies that all Web developers must learn: HTML to specify the content 
 
of web pages, CSS to specify the presentation of web pages, and JavaScript to specify 
 
the behavior of web pages. This book will help you master the language.</p> 
 
    
 
<p>If you are already familiar with other programming languages, it may help you to know 
 
that JavaScript is a high-level, dynamic, untyped interpreted programming language 
 
that is well-suited to object-oriented and functional programming styles. JavaScript 
 
derives its syntax from Java, its first-class functions from Scheme, and its prototypebased 
 
inheritance from Self. But you do not need to know any of those languages, or 
 
be familiar with those terms, to use this book and learn JavaScript.</p> 
 
    
 
<p>The name "JavaScript" is actually somewhat misleading. 
 
    <span>Except</span> 
 
    for a superficial syntactic 
 
resemblance, JavaScript is completely different from the Java programming language. 
 
And JavaScript has long since outgrown its scripting-language roots to become 
 
a robust and efficient general-purpose language. The latest version of the language (see 
 
the sidebar) defines new features for serious large-scale software development.</p> 
 
    
 
</div>

Answer 1

请尝试以下JS -

 
function highlightSearch() { 
 
     var text = document.getElementById("query").value; 
 
    
 
     if ($("#searchtext").has(":contains("+text+")").length) { 
 
      $('#searchtext').show(); 
 
      } 
 
     else 
 
      { 
 
      $('#searchtext').hide(); 
 
      } 
 
     var query = new RegExp("(\\b" + text + "\\b)", "gim"); 
 
     var e = document.getElementById("searchtext").innerHTML; 
 
     var enew = e.replace(/(<span>|<\/span>)/igm, ""); 
 
     document.getElementById("searchtext").innerHTML = enew; 
 
     var newe = enew.replace(query, "<span>$1</span>"); 
 
     document.getElementById("searchtext").innerHTML = newe; 
 
    \t 
 
    }

#searchtext span{ 
 
     background-color:#FF9; 
 
     color:#555; 
 
    } 
 

 
    div { 
 
     padding: 10px; 
 
    } 
 
#searchtext { 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>