如何使用 Vanilla JavaScript 搜索和替換 HTML 文件中的所有標簽？

Question

我不想對內容做任何事情（至少現在還沒有。）我想做的是搜索特定的標簽並將它們替換為另一個標簽。

我得到了這個 HTML ，里面裝滿了具有相同 ID 的這些標簽（我知道這太可怕了！）

<div dir="rtl" id="book-container">
some text here #1
</div>

<div dir="rtl" id="book-container">
some text here #2
</div>

<div dir="rtl" id="book-container">
some text here #3
</div>

.
.
.

<div dir="rtl" id="book-container">
some text here #49
</div>

<div dir="rtl" id="book-container">
some text here #50
</div>

我正在嘗試編寫一個 function 來搜索每個<div dir="rtl" id="book-container">並刪除它而不刪除內部文本。 然后搜索每個</div>並將其刪除。 然后，將整個內容包裝在<p>標記中。

結果應該是這樣的：

<p>
some text here #1

some text here #2

some text here #3

.
.
.

some text here #49

some text here #50
</p>

Answer 1

這是我解決問題的方法，並附有解釋每個步驟的注釋。

我抽取了三個元素的樣本並將它們包含在一個body標簽中：

 /* Create a paragraph element where the content will be displayed */ const theParagraph = document.createElement("p"); /* Choosing the elements */ const soWrongNodes = document.querySelectorAll("#book-container") /* For each element, put its content in the paragraph then remove the element */ soWrongNodes.forEach(soWrongNode => { theParagraph.innerHTML += soWrongNode.innerHTML; theParagraph.innerHTML += "<br>"; soWrongNode.remove(); }) /* Append the paragraph element to the body */ document.body.appendChild(theParagraph);

 <body> <div dir="rtl" id="book-container"> some text here #1 </div> <div dir="rtl" id="book-container"> some text here #2 </div> <div dir="rtl" id="book-container"> some text here #3 </div> </body>

這是一個fiddle.js ，您可以在其中看到結果。

Answer 2

replaceWith可能是您在這里所追求的

 //Get the offending nodes let candidates = document.querySelectorAll("#book-container"); //And iterate them for(let i = 0; i < candidates.length; i++){ //Get a node let candidate = candidates[i]; //Create a replacement, could use createTextNode if you don't want to wrap it //Or change the element, add styles etc if you want. let replacement = document.createElement("p"); //Set the inner text from the node replacement.innerText = candidate.innerText; //Replace the node candidate.replaceWith(replacement); }

 <div dir="rtl" id="book-container"> some text here #1 </div> <div dir="rtl" id="book-container"> some text here #2 </div> <div dir="rtl" id="book-container"> some text here #3 </div> <p>Some Other</p> <p>Content</p> <div dir="rtl" id="book-container"> some text here #49 </div> <div dir="rtl" id="book-container"> some text here #50 </div>

您可能還想調查textContent以及它與innerText的區別

Answer 3

更新：

 function removeElements() { let parent = document.getElementById('book-container').parentElement; let elems = Array.from(parent.children); let texts = [] let group = [] let replace = () => { if (group.length) { let groupElem = document.createElement('p'); groupElem.innerHTML = group.map(e => e.innerText).join('<br/>') group[0].replaceWith(groupElem); for (let i = 1; i < group.length; ++i) { group[i].remove(); } } group = [] }; for (let elem of elems) { if (elem.tagName == 'DIV' && elem.id == 'book-container') { group.push(elem); } else { replace(); } } replace(); } removeElements()

 <div dir="rtl" id="book-container"> some text here #1 </div> <div dir="rtl" id="book-container"> some text here #2 </div> <div dir="rtl" id="book-container"> some text here #3 </div> <p>Some Other</p> <p>Content</p> <div dir="rtl" id="book-container"> some text here #49 </div> <div dir="rtl" id="book-container"> some text here #50 </div>

如何使用 Vanilla JavaScript 搜索和替換 HTML 文件中的所有標簽？

問題描述

3 個解決方案

解決方案1
2 已采納 2021-02-09 01:23:09

解決方案2
0 2021-02-09 00:39:51

解決方案3
-1 2021-02-09 00:05:24

如何使用 Vanilla JavaScript 搜索和替換 HTML 文件中的所有標簽？

問題描述

3 個解決方案

解決方案1 2 已采納 2021-02-09 01:23:09

解決方案2 0 2021-02-09 00:39:51

解決方案3 -1 2021-02-09 00:05:24

解決方案1
2 已采納 2021-02-09 01:23:09

解決方案2
0 2021-02-09 00:39:51

解決方案3
-1 2021-02-09 00:05:24