如何使用 Vanilla JavaScript 搜索和替换 HTML 文件中的所有标签？
[英]How to search and replace all tags in HTML file using Vanilla JavaScript?
问题描述
I am not trying to do anything to the content (at least not yet.) What I am trying to do is search for specific tags and replace them with another one.
我不想对内容做任何事情（至少现在还没有。）我想做的是搜索特定的标签并将它们替换为另一个标签。
I got this HTML that is filled with these tags with the SAME ID (I know this is horrible!)我得到了这个 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>
I am trying to write a function that would search for every <div dir="rtl" id="book-container"> and delete it without deleting the inner text.我正在尝试编写一个 function 来搜索每个<div dir="rtl" id="book-container">并删除它而不删除内部文本。 And then search for every </div> and delete it as well.然后搜索每个</div>并将其删除。 Then, wrap the entire thing in a <p> tags.然后，将整个内容包装在<p>标记中。
The result should be something like this:结果应该是这样的：
<p>
some text here #1
some text here #2
some text here #3
.
.
.
some text here #49
some text here #50
</p>
3 个解决方案
解决方案1
2 已采纳 2021-02-09 01:23:09
Here is my approach to the problem with a comment explaining each step.这是我解决问题的方法，并附有解释每个步骤的注释。
I took a sample of three elements and enclosed them in a body tag:我抽取了三个元素的样本并将它们包含在一个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>
Here is a fiddle.js where you can see the result.这是一个fiddle.js ，您可以在其中看到结果。
解决方案2
0 2021-02-09 00:39:51
replaceWith is probably what you are after here 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>
You may also want to investigate textContent and how it differs from innerText您可能还想调查textContent以及它与innerText的区别
解决方案3
-1 2021-02-09 00:05:24
UPDATED:更新：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.