英文:
Unnest nested tags in html using javascript
问题
function Unnest() {
document.getElementById("Nested").innerHTML = document.getElementById("Nested").innerHTML.replace(/<tag>(.*?)<tag>(.*?)<\/tag>(.*?)<\/tag>/g, '<tag>$1</tag><tag>$2</tag><tag>$3</tag>');
}
英文:
Take for exepmple this html:
<tag>sometext<tag>sometext</tag>sometext</tag>
i want a javascript function that can replace that with:
<tag>sometext</tag><tag>sometext</tag><tag>sometext</tag>
How do i do that ?
I tried to do that using regex, but that dosent replace every nested tag and i dont know if there is an expression that can achieve that.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script>
function Unnest() {
document.getElementById("Nested").innerHTML = document.getElementById("Nested").innerHTML.replace(/<tag>(.*?)<tag>(.*?)<\/tag>(.*?)<\/tag>/g, '<tag>$1</tag><tag>$2</tag><tag>$3</tag>');
}
</script>
</head>
<body>
<div id="Nested">
<tag>sometext<tag>sometext</tag>sometext</tag>
</div>
<button onclick="Unnest()">Unnest</button>
</body>
</html>
答案1
得分: 2
这只是一个可能追踪路径的示例，具体取决于您实际的HTML标签的复杂性，因此可能是问题的过于简化。例如，如果您的DOM中有许多这些标签树，其中子节点的数量不同，那么您将需要能够选择每个选择的最外部标签；如果它们嵌套在彼此内部，那么您将需要找到一种方法来选择它们或通过它们的子节点进行迭代，可能是递归的方式。没有更多信息很难确定。
尽管如此，如果您对目标的DOM结构了解足够多，您可以尝试这种方法并进行定制。
然而，如果您试图处理更一般的情况，或者必须以字符串而不是使用DOM来处理HTML，那么可能需要另一种解析字符串的方法。
let el = document.querySelector('tag').firstChild,
html = new Array();
while (el) {
switch (el.nodeName) {
case "TAG" :
html.push("<tag>" + el.textContent + "</tag>");
break;
case "#text" :
html.push("<tag>" + el.nodeValue + "</tag>");
break;
default :
console.log("Unexpected input");
}
el = el.nextSibling;
}
console.log( html.join(''));
let tag = document.querySelector('tag'),
el = tag.firstChild,
frag = document.createDocumentFragment();
while (el) {
switch (el.nodeName) {
case "TAG" : {
let t = document.createElement('TAG');
t.classList.add('indiv');
t.textContent = el.textContent;
frag.appendChild(t);
break;
}
case "#text" : {
let t = document.createElement('TAG');
t.classList add('indiv');
t.textContent = el.nodeValue;
frag.appendChild(t);
break;
}
default :
console.log("Unexpected input");
}
el = el.nextSibling;
}
tag.parentNode.replaceChild(frag,tag);
tag.indiv {
margin: 0 10px;
}
<tag>sometext1<tag>sometext2</tag>sometext3</tag>
希望这对您有所帮助。
英文:
This is just an example of a possible path to pursue depending upon the complexity of your real HTML tags and, as such, may be an oversimplification of the problem. For example, if there are many of these tag trees in your DOM with varying numbers of child nodes, then you'll have to be able to select the outer most tag of each selection; and if they are nested within each other, then you'll have to find a way select them or iterate through their child nodes, perhaps recursively. Hard to tell without more information.
Nonetheless, if you know enough about the DOM structure you're targeting you could try this kind of approach and tailor it to fit.
However, if you're attempting to handle a more general scenario or must work on the HTML as a string rather than using the DOM, then another approach that parses the string would likely be necessary.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let el = document.querySelector('tag').firstChild,
html = new Array();
while (el) {
switch (el.nodeName) {
case "TAG" :
html.push("<tag>" + el.textContent + "</tag>");
break;
case "#text" :
html.push("<tag>" + el.nodeValue + "</tag>");
break;
default :
console.log("Unexpected input");
}
el = el.nextSibling;
}
console.log( html.join(''));
<!-- language: lang-html -->
<tag>sometext1<tag>sometext2</tag>sometext3</tag>
<!-- end snippet -->
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let tag = document.querySelector('tag'),
el = tag.firstChild,
frag = document.createDocumentFragment();
while (el) {
switch (el.nodeName) {
case "TAG" : {
let t = document.createElement('TAG');
t.classList.add('indiv');
t.textContent = el.textContent;
frag.appendChild(t);
break;
}
case "#text" : {
let t = document.createElement('TAG');
t.classList.add('indiv');
t.textContent = el.nodeValue;
frag.appendChild(t);
break;
}
default :
console.log("Unexpected input");
}
el = el.nextSibling;
}
tag.parentNode.replaceChild(frag,tag);
<!-- language: lang-css -->
tag.indiv {
margin: 0 10px;
}
<!-- language: lang-html -->
<tag>sometext1<tag>sometext2</tag>sometext3</tag>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论