如何使用 JavaScript 獲取 HTML 註釋的內容


任何網頁瀏覽器都會忽略註釋,註釋是一段程式碼。為 HTML 程式碼添加註釋是一個最佳實踐,尤其是在複雜的出版物中,這樣任何檢視程式碼的人都可以輕鬆識別頁面各個部分和任何額外的說明。註釋使您的程式碼更易於您和其他使用者閱讀和理解。

HTML 註釋放置在<! —... -->標籤之間。因此,瀏覽器會將包含在<!—... -->標籤中的任何內容都視為註釋,並且不會對其進行任何處理。

語法

以下是註釋的語法:

<! -- Comments here -->

讓我們看看以下示例,以便更好地理解如何使用 JavaScript 獲取 HTML 註釋的內容。

示例

在以下示例中,我們執行一個指令碼來顯示網頁上註釋內的內容。

<!DOCTYPE html>
<html>
   <body>
      <p id="tutorial"></p>
      <p id="tutorial1"></p>
      <script>
         function showtext(comment) {
            return comment
            .replaceAll("<!--", "")
            .replaceAll("-->", "")
         }
         document.getElementById("tutorial").innerHTML=(showtext("<!--Welcome-->"));
         document.getElementById("tutorial1").innerHTML=(showtext("<!--Tutorials <!--Point-->"));
      </script>
   </body>
</html>

當指令碼執行時,它將生成一個輸出,其中包含用作註釋內容的網頁文字。

在 JavaScript 中使用 replace()

replace() 方法在字串中查詢值或正則表示式。replace() 方法的結果是一個包含已替換值的新字串。replace() 方法不會更改原始字串。

語法

以下是 replace() 的語法:

string.replace(searchValue, newValue)

示例

考慮以下示例,我們使用replace()來顯示註釋的內容。

<!DOCTYPE html>
<html>
   <body style="background-color:#EAFAF1 ">
      <h1>MSD</h1>
      <!--<div>VIRAT</div>-->
      <!--<div>ABD</div>-->
      <script>
         var body = document.getElementsByTagName('body')[0],
         bodyHtml = body.innerHTML;
         while (bodyHtml.indexOf("<!--") !== -1) {
            bodyHtml = bodyHtml.replace("<!--", "").replace("-->", "");
         }
         body.innerHTML = bodyHtml;
      </script>
   </body>
</html>

執行上述指令碼後,將彈出輸出視窗,顯示文字以及網頁上註釋的內容。

示例

執行以下程式碼,使用replace()獲取 HTML 註釋的內容。

<!DOCTYPE html>
<html>
   <body style="background-color:#D5F5E3">
      <p id="tutorial"></p>
      <p id="tutorial1"></p>
      <script>
         function getContent(comment) {
            return comment
            .replace(/<!--(.*?)-->/g, "$1");
         }
         document.getElementById("tutorial").innerHTML=(getContent("<!--ICC WorldCup-->"));
         document.getElementById("tutorial1").innerHTML=(getContent("<!--Indian Premier League-->"));
      </script>
   </body>
</html>

當指令碼執行時,它將生成一個輸出,其中包含從 HTML 註釋內容中獲取的網頁上顯示的文字。

更新於:2023年4月20日

577 次檢視

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.