我可以在瀏覽器上刪除 HTML 代碼片段嗎

Question

我有一個 HTML 代碼塊。 我怎樣才能在瀏覽器上用純 JS 或 JQuery 刪除這個片段？

這是我的代碼：

<ul>
    <li>New York</li>
    <li>London</li>
    <li>Madrid</li>
    <li>Paris</li>
</ul>

我預期的結果是：

<p>New York, London, Madrid, Paris</p>

我不需要獲取網站的 HTML 文檔。 我已經有很多積木了。 我只想在客戶端廢棄這些塊。

Answer 1

如果我理解正確的話，您已經有一個包含 HTML 的string ，所以您唯一需要做的就是解析該字符串。 這可以使用DOMParser class 來完成。從那時起它就很簡單了，因為你得到一個返回的Document ，它提供了你現在應該從網頁的 DOM 中獲得的所有方法。 在這種情況下，您可以使用getElementsByTagName()獲取所有列表項，然后使用map()僅獲取那些列表項的textContent 。

 const domParser = new DOMParser(); const parsed = domParser.parseFromString(` <ul> <li>New York</li> <li>London</li> <li>Madrid</li> <li>Paris</li> </ul>`, "text/html"); const cityArray = [...parsed.getElementsByTagName("li")].map(li => li.textContent); console.log(cityArray);

編輯

既然我正在閱讀您編輯過的問題，我認為您想要做的與 web 抓取無關，您只想在您擁有的網站上編輯現有的 DOM。

在這種情況下，您可以跳過整個解析，而是執行以下操作：

 const cityArray = [...document.getElementsByTagName("li")].map(li => li.textContent); const pTag = document.createElement("p"); pTag.textContent = cityArray.join(", "); document.body.appendChild(pTag);

 <ul> <li>New York</li> <li>London</li> <li>Madrid</li> <li>Paris</li> </ul>