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

huangapple
go评论102阅读模式
英文:

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

问题

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

  1. element.innerHTML = highlightedText; //如果我注释掉这一行，文本可以工作，但没有格式
  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  1. * {
  2.   box-sizing: border-box;
  3. }
  5. #results {
  6.   display: none;
  7.   margin-top: 10px;
  8. }
  10. #searchResults {
  11.   background-color: #f6f6f6;
  12.   margin-top: -2px;
  13.   width: 430px;
  14.   height: 200px;
  15.   border: 1px solid #ddd;
  16. }
  18. #searchInput {
  19.   background-image: url('/css/searchicon.png');
  20.   background-position: 10px 12px;
  21.   background-repeat: no-repeat;
  22.   width: 425px;
  23.   font-size: 14px;
  24.   padding: 12px 20px 12px 40px;
  25.   border: 1px solid #ddd;
  26.   margin-bottom: 12px;
  27. }
  29. #searchTeams {
  30.   list-style-type: none;
  31.   width: 425px;
  32.   font-size: 16px;
  33.   border: 1px solid #ddd;
  34. }
  36. #searchTeams li a {
  37.   color: 1px solid #ddd;
  38.   margin-top: -2px;
  39.   /* Prevent double borders */
  40.   background-color: #f6f6f6;
  41.   background-position: 10px 12px;
  42.   font-weight: bold;
  43.   padding: 12px;
  44.   text-decoration: none;
  45.   font-size: 19px;
  46.   color: black;
  47.   display: block;
  48. }
  50. #teams {
  51.   color: 1px solid #ddd;
  52.   margin-top: -2px;
  53.   /* Prevent double borders */
  54.   padding: 12px;
  55.   text-decoration: none;
  56. }
  58. #searchTeams li a:hover:not(.header) {
  59.   background-color: #aeadca;
  60.   width: 100%;
  61.   padding-left: 35px;
  62.   color: blue;
  63. }
  65. ul.scroll {
  66.   background-color: #f6f6f6;
  67.   width: 600px;
  68.   height: 500px;
  69.   overflow-x: hidden;
  70.   overflow-y: auto;
  71.   text-align: left;
  72.   padding: 20px;
  73. }
  75. .highlight {
  76.   background-color: yellow;
  77. }
  79. <!-- language: lang-html -->
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <title>NACC-Teams-Locator</title>
  7. </head>
  9. <body>
  10.   <div id="teams">
  11.     <h2>ACC Teams:</h2>
  12.     <input type="text" id="searchInput" placeholder="Search for teams / keywords / services..." oninput="search()">
  13.     <ul class="scroll" id="searchTeams">
  14.       <li style="display: list-item;"><a href="#">WMAA</a></li>
  15.       <li style="display: list-item;"><a href="#">MobileInf</a></li>
  16.       <li style="display: list-item;"><a href="#">MSM</a></li>
  17.       <li style="display: list-item;"><a href="#">SECAPPS</a></li>
  18.       <li style="display: list-item;"><a href="#">SECAPPS</a></li>
  19.     </ul>
  20.     <div id="results">
  21.       <h3>Services supported by team:</h3>
  22.       <ul id="searchResults" class="scroll">
  23.         <li style="display: none;">
  24.           <h3>MobileInf:</h3><br> -APIs<br> -Layer 7<br> -Gloo<br> -Gateways<br> -API portal</li>
  25.         <li style="display: none;">
  26.           <h3>Midrange Servers Management (MSM):</h3> -Servers<br> -Filesystem usage<br> -Patching<br> -Root<br> -API portal</li>
  27.         <li style="display: none;">
  28.           <h3>SECAPPS:</h3> -Okta<br> -Passwordsafe<br> -OIG<br> -Forgerock<br> -Evidian <br> -Cyberark<br> -go/password</li>
  29.         <li style="display: none;">
  30.           <h3>Hadoop:</h3> -Hive<br> -Cloudera<br> -Hue/Ambari<br> -Yarn/HDFS<br> -Hadoop Data Movement</b>
  31.         </li>
  32.       </ul>
  33.     </div>
  34.   </div>
  35.   <p>
  36.     //&lt;img src=&quot;&quot; /&gt;
  37.   </p>
  38. </body>
  40. </html>
  42. <!-- 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.

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

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

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

  1. function wrapMatchesInSpan(element, searchTerm) {
  2. var text = element.textContent;
  3. var regex = new RegExp(searchTerm, &#39;gi&#39;);
  4. var matches = text.match(regex);
  5. if (matches &amp;&amp; matches.length &gt; 0) {
  6. var highlightedText = text.replace(regex, function(match) {
  7. return &#39;&lt;span class=&quot;highlight&quot;&gt;&#39; + match + &#39;&lt;/span&gt;&#39;;
  8. });
  9. element.innerHTML = highlightedText; //if I comment this line, then the text works but, without format
  10. }
  11. }
  12. function search() {
  13. var searchTerm = document.getElementById(&quot;searchInput&quot;).value.toLowerCase();
  14. var listItems = document.getElementById(&quot;searchResults&quot;).getElementsByTagName(&quot;li&quot;);
  15. var teamItems = document.getElementById(&quot;searchTeams&quot;).getElementsByTagName(&quot;li&quot;);
  16. var resultsDiv = document.getElementById(&quot;results&quot;);
  17. for (var i = 0; i &lt; listItems.length; i++) {
  18. var listItem = listItems[i];
  19. var text = listItem.textContent.toLowerCase();
  20. if (text.includes(searchTerm)) {
  21. listItem.innerHTML = listItem.innerHTML.replace(new RegExp(searchTerm, &#39;gi&#39;), function(match) {
  22. return &#39;&lt;span class=&quot;highlight&quot;&gt;&#39; + match + &#39;&lt;/span&gt;&#39;;
  23. });
  24. listItem.style.display = &quot;list-item&quot;;
  25. } else {
  26. listItem.innerHTML = &#39;&#39;; // Clear the content
  27. listItem.style.display = &quot;none&quot;;
  28. }
  29. }
  30. var hideAllTeams = true;
  31. for (var j = 0; j &lt; teamItems.length; j++) {
  32. var teamItem = teamItems[j];
  33. var teamText = teamItem.textContent.toLowerCase();
  34. if (teamText.includes(searchTerm)) {
  35. teamItem.style.display = &quot;list-item&quot;;
  36. hideAllTeams = false;
  37. } else {
  38. teamItem.style.display = &quot;none&quot;;
  39. }
  40. }
  41. if (searchTerm === &quot;&quot;) {
  42. resultsDiv.style.display = &quot;none&quot;;
  43. } else {
  44. resultsDiv.style.display = &quot;block&quot;;
  45. }
  46. if (hideAllTeams) {
  47. teamsDiv.style.display = &quot;none&quot;;
  48. } else {
  49. teamsDiv.style.display = &quot;block&quot;;
  50. }
  51. }

<!-- language: lang-css -->

  1. * {
  2. box-sizing: border-box;
  3. }
  4. #results {
  5. display: none;
  6. margin-top: 10px;
  7. }
  8. #searchResults {
  9. background-color: #f6f6f6;
  10. margin-top: -2px;
  11. width: 430px;
  12. height: 200px;
  13. border: 1px solid #ddd;
  14. }
  15. #searchInput {
  16. background-image: url(&#39;/css/searchicon.png&#39;);
  17. background-position: 10px 12px;
  18. background-repeat: no-repeat;
  19. width: 425px;
  20. font-size: 14px;
  21. padding: 12px 20px 12px 40px;
  22. border: 1px solid #ddd;
  23. margin-bottom: 12px;
  24. }
  25. #searchTeams {
  26. list-style-type: none;
  27. width: 425px;
  28. font-size: 16px;
  29. border: 1px solid #ddd;
  30. }
  31. #searchTeams li a {
  32. color: 1px solid #ddd;
  33. margin-top: -2px;
  34. /* Prevent double borders */
  35. background-color: #f6f6f6;
  36. background-position: 10px 12px;
  37. font-weight: bold;
  38. padding: 12px;
  39. text-decoration: none;
  40. font-size: 19px;
  41. color: black;
  42. display: block
  43. }
  44. #teams {
  45. color: 1px solid #ddd;
  46. margin-top: -2px;
  47. /* Prevent double borders */
  48. padding: 12px;
  49. text-decoration: none;
  50. }
  51. #searchTeams li a:hover:not(.header) {
  52. background-color: #aeadca;
  53. width: 100%;
  54. padding-left: 35px;
  55. color: blue;
  56. }
  57. ul.scroll {
  58. background-color: #f6f6f6;
  59. width: 600px;
  60. height: 500px;
  61. overflow-x: hidden;
  62. overflow-y: auto;
  63. text-align: left;
  64. padding: 20px;
  65. }
  66. .highlight {
  67. background-color: yellow;
  68. }

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

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  5. &lt;title&gt;NACC-Teams-Locator&lt;/title&gt;
  6. &lt;/head&gt;
  7. &lt;body&gt;
  8. &lt;div id=&quot;teams&quot;&gt;
  9. &lt;h2&gt;ACC Teams:&lt;/h2&gt;
  10. &lt;input type=&quot;text&quot; id=&quot;searchInput&quot; placeholder=&quot;Search for teams / keywords / services...&quot; oninput=&quot;search()&quot;&gt;
  11. &lt;ul class=&quot;scroll&quot; id=&quot;searchTeams&quot;&gt;
  12. &lt;li style=&quot;display: list-item;&quot;&gt;&lt;a href=&quot;#&quot;&gt;WMAA&lt;/a&gt;&lt;/li&gt;
  13. &lt;li style=&quot;display: list-item;&quot;&gt;&lt;a href=&quot;#&quot;&gt;MobileInf&lt;/a&gt;&lt;/li&gt;
  14. &lt;li style=&quot;display: list-item;&quot;&gt;&lt;a href=&quot;#&quot;&gt;MSM&lt;/a&gt;&lt;/li&gt;
  15. &lt;li style=&quot;display: list-item;&quot;&gt;&lt;a href=&quot;#&quot;&gt;SECAPPS&lt;/a&gt;&lt;/li&gt;
  16. &lt;li style=&quot;display: list-item;&quot;&gt;&lt;a href=&quot;#&quot;&gt;SECAPPS&lt;/a&gt;&lt;/li&gt;
  17. &lt;/ul&gt;
  18. &lt;div id=&quot;results&quot;&gt;
  19. &lt;h3&gt;Services supported by team:&lt;/h3&gt;
  20. &lt;ul id=&quot;searchResults&quot; class=&quot;scroll&quot;&gt;
  21. &lt;li style=&quot;display: none;&quot;&gt;
  22. &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;
  23. &lt;li style=&quot;display: none;&quot;&gt;
  24. &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;
  25. &lt;li style=&quot;display: none;&quot;&gt;
  26. &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;
  27. &lt;li style=&quot;display: none;&quot;&gt;
  28. &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;
  29. &lt;/li&gt;
  30. &lt;/ul&gt;
  31. &lt;/div&gt;
  32. &lt;/div&gt;
  33. &lt;p&gt;
  34. //&lt;img src=&quot;&quot; /&gt;
  35. &lt;/p&gt;
  36. &lt;/body&gt;
  37. &lt;/html&gt;

<!-- end snippet -->

答案1

得分: 0

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

  1.   for (var i = 0; i &lt; listItems.length; i++) {
  2.     var listItem = listItems[i];
  3.     var text = listItem.textContent.toLowerCase();
  5.     listItem.innerHTML = listItem.innerHTML.replaceAll('&lt;span class=&quot;highlight&quot;&gt;', '') 
  6.     listItem.innerHTML = listItem.innerHTML.replaceAll('&lt;/span&gt;', '') 
  8.     ...

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

英文:

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 &lt;span&gt;&lt;/span&gt; tags. However, you can circumvent this problem by deleting the corresponding parts from innerHTML each time when search() is called.

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

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

huangapple
  • 本文由 发表于 2023年7月11日 12:21:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76658697.html
  • css
  • html
  • javascript
  • tags
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定