2023年7月11日 12:21:09go评论74阅读模式

英文:

Javascript function doesn't show correctly format with HTML tags when highlighting matches

问题

我正在尝试在以下代码中创建匹配字符串的高亮显示。但不知何故，结果或输出未以我在div结果（UL/LIs）中设置的格式显示。实际上，我会感激您的建议来解决这个问题。

element.innerHTML = highlightedText; //如果我注释掉这一行，文本可以工作，但没有格式

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

* {
  box-sizing: border-box;
}

#results {
  display: none;
  margin-top: 10px;
}

#searchResults {
  background-color: #f6f6f6;
  margin-top: -2px;
  width: 430px;
  height: 200px;
  border: 1px solid #ddd;
}

#searchInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 425px;
  font-size: 14px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#searchTeams {
  list-style-type: none;
  width: 425px;
  font-size: 16px;
  border: 1px solid #ddd;
}

#searchTeams li a {
  color: 1px solid #ddd;
  margin-top: -2px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  background-position: 10px 12px;
  font-weight: bold;
  padding: 12px;
  text-decoration: none;
  font-size: 19px;
  color: black;
  display: block;
}

#teams {
  color: 1px solid #ddd;
  margin-top: -2px;
  /* Prevent double borders */
  padding: 12px;
  text-decoration: none;
}

#searchTeams li a:hover:not(.header) {
  background-color: #aeadca;
  width: 100%;
  padding-left: 35px;
  color: blue;
}

ul.scroll {
  background-color: #f6f6f6;
  width: 600px;
  height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  padding: 20px;
}

.highlight {
  background-color: yellow;
}

<!-- language: lang-html -->

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NACC-Teams-Locator</title>
</head>

<body>
  <div id="teams">
    <h2>ACC Teams:</h2>
    <input type="text" id="searchInput" placeholder="Search for teams / keywords / services..." oninput="search()">
    <ul class="scroll" id="searchTeams">
      <li style="display: list-item;"><a href="#">WMAA</a></li>
      <li style="display: list-item;"><a href="#">MobileInf</a></li>
      <li style="display: list-item;"><a href="#">MSM</a></li>
      <li style="display: list-item;"><a href="#">SECAPPS</a></li>
      <li style="display: list-item;"><a href="#">SECAPPS</a></li>
    </ul>
    <div id="results">
      <h3>Services supported by team:</h3>
      <ul id="searchResults" class="scroll">
        <li style="display: none;">
          <h3>MobileInf:</h3><br> -APIs<br> -Layer 7<br> -Gloo<br> -Gateways<br> -API portal</li>
        <li style="display: none;">
          <h3>Midrange Servers Management (MSM):</h3> -Servers<br> -Filesystem usage<br> -Patching<br> -Root<br> -API portal</li>
        <li style="display: none;">
          <h3>SECAPPS:</h3> -Okta<br> -Passwordsafe<br> -OIG<br> -Forgerock<br> -Evidian <br> -Cyberark<br> -go/password</li>
        <li style="display: none;">
          <h3>Hadoop:</h3> -Hive<br> -Cloudera<br> -Hue/Ambari<br> -Yarn/HDFS<br> -Hadoop Data Movement</b>
        </li>
      </ul>
    </div>
  </div>
  <p>
    //&lt;img src=&quot;&quot; /&gt;
  </p>
</body>

</html>

<!-- end snippet -->

英文:

I am trying to create a match strings highlighting matches in the following code. But, somehow, the results or output does not appear in the format I am setting in the div results (UL/LIs). Actually, I'would appreciate your advice to tackle this issue.

element.innerHTML = highlightedText;  //if I comment this line, then the text works but, without format

function wrapMatchesInSpan(element, searchTerm) {
var text = element.textContent;
var regex = new RegExp(searchTerm, &#39;gi&#39;);
var matches = text.match(regex);
if (matches &amp;&amp; matches.length &gt; 0) {
var highlightedText = text.replace(regex, function(match) {
return &#39;&lt;span class=&quot;highlight&quot;&gt;&#39; + match + &#39;&lt;/span&gt;&#39;;
});
element.innerHTML = highlightedText; //if I comment this line, then the text works but, without format
}
}
function search() {
var searchTerm = document.getElementById(&quot;searchInput&quot;).value.toLowerCase();
var listItems = document.getElementById(&quot;searchResults&quot;).getElementsByTagName(&quot;li&quot;);
var teamItems = document.getElementById(&quot;searchTeams&quot;).getElementsByTagName(&quot;li&quot;);
var resultsDiv = document.getElementById(&quot;results&quot;);
for (var i = 0; i &lt; listItems.length; i++) {
var listItem = listItems[i];
var text = listItem.textContent.toLowerCase();
if (text.includes(searchTerm)) {
listItem.innerHTML = listItem.innerHTML.replace(new RegExp(searchTerm, &#39;gi&#39;), function(match) {
return &#39;&lt;span class=&quot;highlight&quot;&gt;&#39; + match + &#39;&lt;/span&gt;&#39;;
});
listItem.style.display = &quot;list-item&quot;;
} else {
listItem.innerHTML = &#39;&#39;; // Clear the content
listItem.style.display = &quot;none&quot;;
}
}
var hideAllTeams = true;
for (var j = 0; j &lt; teamItems.length; j++) {
var teamItem = teamItems[j];
var teamText = teamItem.textContent.toLowerCase();
if (teamText.includes(searchTerm)) {
teamItem.style.display = &quot;list-item&quot;;
hideAllTeams = false;
} else {
teamItem.style.display = &quot;none&quot;;
}
}
if (searchTerm === &quot;&quot;) {
resultsDiv.style.display = &quot;none&quot;;
} else {
resultsDiv.style.display = &quot;block&quot;;
}
if (hideAllTeams) {
teamsDiv.style.display = &quot;none&quot;;
} else {
teamsDiv.style.display = &quot;block&quot;;
}
}

* {
box-sizing: border-box;
}
#results {
display: none;
margin-top: 10px;
}
#searchResults {
background-color: #f6f6f6;
margin-top: -2px;
width: 430px;
height: 200px;
border: 1px solid #ddd;
}
#searchInput {
background-image: url(&#39;/css/searchicon.png&#39;);
background-position: 10px 12px;
background-repeat: no-repeat;
width: 425px;
font-size: 14px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#searchTeams {
list-style-type: none;
width: 425px;
font-size: 16px;
border: 1px solid #ddd;
}
#searchTeams li a {
color: 1px solid #ddd;
margin-top: -2px;
/* Prevent double borders */
background-color: #f6f6f6;
background-position: 10px 12px;
font-weight: bold;
padding: 12px;
text-decoration: none;
font-size: 19px;
color: black;
display: block
}
#teams {
color: 1px solid #ddd;
margin-top: -2px;
/* Prevent double borders */
padding: 12px;
text-decoration: none;
}
#searchTeams li a:hover:not(.header) {
background-color: #aeadca;
width: 100%;
padding-left: 35px;
color: blue;
}
ul.scroll {
background-color: #f6f6f6;
width: 600px;
height: 500px;
overflow-x: hidden;
overflow-y: auto;
text-align: left;
padding: 20px;
}
.highlight {
background-color: yellow;
}

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;title&gt;NACC-Teams-Locator&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;teams&quot;&gt;
&lt;h2&gt;ACC Teams:&lt;/h2&gt;
&lt;input type=&quot;text&quot; id=&quot;searchInput&quot; placeholder=&quot;Search for teams / keywords / services...&quot; oninput=&quot;search()&quot;&gt;
&lt;ul class=&quot;scroll&quot; id=&quot;searchTeams&quot;&gt;
&lt;li style=&quot;display: list-item;&quot;&gt;&lt;a href=&quot;#&quot;&gt;WMAA&lt;/a&gt;&lt;/li&gt;
&lt;li style=&quot;display: list-item;&quot;&gt;&lt;a href=&quot;#&quot;&gt;MobileInf&lt;/a&gt;&lt;/li&gt;
&lt;li style=&quot;display: list-item;&quot;&gt;&lt;a href=&quot;#&quot;&gt;MSM&lt;/a&gt;&lt;/li&gt;
&lt;li style=&quot;display: list-item;&quot;&gt;&lt;a href=&quot;#&quot;&gt;SECAPPS&lt;/a&gt;&lt;/li&gt;
&lt;li style=&quot;display: list-item;&quot;&gt;&lt;a href=&quot;#&quot;&gt;SECAPPS&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div id=&quot;results&quot;&gt;
&lt;h3&gt;Services supported by team:&lt;/h3&gt;
&lt;ul id=&quot;searchResults&quot; class=&quot;scroll&quot;&gt;
&lt;li style=&quot;display: none;&quot;&gt;
&lt;h3&gt;MobileInf:&lt;/h3&gt;&lt;br&gt; -APIs&lt;br&gt; -Layer 7&lt;br&gt; -Gloo&lt;br&gt; -Gateways&lt;br&gt; -API portal&lt;/li&gt;
&lt;li style=&quot;display: none;&quot;&gt;
&lt;h3&gt;Midrange Servers Management (MSM):&lt;/h3&gt; -Servers&lt;br&gt; -Filesystem usage&lt;br&gt; -Patching&lt;br&gt; -Root&lt;br&gt; -API portal&lt;/li&gt;
&lt;li style=&quot;display: none;&quot;&gt;
&lt;h3&gt;SECAPPS:&lt;/h3&gt; -Okta&lt;br&gt; -Passwordsafe&lt;br&gt; -OIG&lt;br&gt; -Forgerock&lt;br&gt; -Evidian &lt;br&gt; -Cyberark&lt;br&gt; -go/password&lt;/li&gt;
&lt;li style=&quot;display: none;&quot;&gt;
&lt;h3&gt;Hadoop:&lt;/h3&gt; -Hive&lt;br&gt; -Cloudera&lt;br&gt; -Hue/Ambari&lt;br&gt; -Yarn/HDFS&lt;br&gt; -Hadoop Data Movement&lt;/b&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;
//&lt;img src=&quot;&quot; /&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

答案1

得分: 0

正如在评论中已经提到的，每次调用search()时，innerHTML都会发生更改。从第二次调用开始，搜索字符无法找到，因为存在<span></span>标签。然而，您可以通过在每次调用search()时从innerHTML中删除相应的部分来解决这个问题。

  for (var i = 0; i &lt; listItems.length; i++) {
    var listItem = listItems[i];
    var text = listItem.textContent.toLowerCase();

    listItem.innerHTML = listItem.innerHTML.replaceAll('&lt;span class=&quot;highlight&quot;&gt;', '') 
    listItem.innerHTML = listItem.innerHTML.replaceAll('&lt;/span&gt;', '') 

    ...

英文:

As already mentioned in the comments, the innerHTML gets changed every time when search() is invoked. From the second call on, the search characters cannot be found because there exists <span></span> tags. However, you can circumvent this problem by deleting the corresponding parts from innerHTML each time when search() is called.

  for (var i = 0; i &lt; listItems.length; i++) {
var listItem = listItems[i];
var text = listItem.textContent.toLowerCase();
listItem.innerHTML = listItem.innerHTML.replaceAll(&#39;&lt;span class=&quot;highlight&quot;&gt;&#39;, &#39;&#39;) 
listItem.innerHTML = listItem.innerHTML.replaceAll(&#39;&lt;/span&gt;&#39;, &#39;&#39;) 
...

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

JavaScript函数在突出显示匹配项时，HTML标签的格式显示不正确。

问题

答案1

在Angular 16中使用NPM的ng-circle-progress组件的方法是什么？

自定义图片上传 Jodit 编辑器中的 URL

解码JavaScript中以Base64编码的Java编码字符串。

Redux 状态对象出现多次渲染并变为未定义

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论