Javascript 如何将纯文本 html 元素拆分成数组?
Javascript how to split plain text html elements into an array?
如果我有一个包含 html 元素的字符串,创建兄弟 html 元素数组的有效方法是什么?
尝试将 indexOf 与开始标记“<”的第一个字母和结束标记的最后一个字母一起使用变得复杂,因为可以有子元素。
简单示例:
<p>Hello there</p>
<h1>Thank you</h1>
提前致谢!
我相信这就是你想要做的。
<div id="container">
<div>child 1</div>
<div>child 2</div>
<div>child 3</div>
</div>
<script type="text/javascript">
let elements = [], container = document.getElementById("container");
for(let i = 0; i < container.children.length; i++){
elements.push(container.children[i].outerHTML);
}
console.log(elements);
</script>
使用正则表达式和js split方法我们可以提取。
检查我的代码
let a = `<p>Hello there</p><p>How r you?</p>
<h1>Thank you</h1>`
let b = a.split(/<[a-zA-Z0-9]*>([^<.*>;]*)<\/[a-zA-Z0-9]*>/gmi).filter(x=>x.trim() !== '')
console.log(b) //['Hello there', 'How r you?', 'Thank you']
您可以使用正则表达式来解决这个问题。
使用正则表达式查找所有开始和结束标记并替换为“/”(其他东西)然后拆分它然后使用 filter(Boolean)
过滤 (“”)
代码:
var elements = [],container = document.getElementById("container");
for(let i = 0; i < container.children.length; i++) { elements.push(container.children[i].outerHTML.replace(/<\/?[^>]+(>|$)/g, ""));
}
console.log("plainTextArray = ",elements);
let bodyHtml = document.getElementsByTagName('div')["0"].innerHTML;
let plainTextArray = bodyHtml.replace(/<\/?[^>]+(>|$)/g, "//").split("//").filter(Boolean)
console.log('plainTextArray = ',plainTextArray);
<body>
<div id="container"><p>Hello there</p><h1>Thank you</h1></div>
</body>
您可以像这样使用从子元素中获取所有文本。
let nodeList = document.getElementById('stack').querySelectorAll('*');
let list = [];
nodeList.forEach(function(val){
list.push(val.outerHTML)
})
console.log(list);
<div id="stack">
<p>Hello there</p>
<h1>Thank you</h1>
</div>
如果我有一个包含 html 元素的字符串,创建兄弟 html 元素数组的有效方法是什么?
尝试将 indexOf 与开始标记“<”的第一个字母和结束标记的最后一个字母一起使用变得复杂,因为可以有子元素。
简单示例:
<p>Hello there</p>
<h1>Thank you</h1>
提前致谢!
我相信这就是你想要做的。
<div id="container">
<div>child 1</div>
<div>child 2</div>
<div>child 3</div>
</div>
<script type="text/javascript">
let elements = [], container = document.getElementById("container");
for(let i = 0; i < container.children.length; i++){
elements.push(container.children[i].outerHTML);
}
console.log(elements);
</script>
使用正则表达式和js split方法我们可以提取。
检查我的代码
let a = `<p>Hello there</p><p>How r you?</p>
<h1>Thank you</h1>`
let b = a.split(/<[a-zA-Z0-9]*>([^<.*>;]*)<\/[a-zA-Z0-9]*>/gmi).filter(x=>x.trim() !== '')
console.log(b) //['Hello there', 'How r you?', 'Thank you']
您可以使用正则表达式来解决这个问题。
使用正则表达式查找所有开始和结束标记并替换为“/”(其他东西)然后拆分它然后使用 filter(Boolean)
过滤 (“”)代码:
var elements = [],container = document.getElementById("container");
for(let i = 0; i < container.children.length; i++) { elements.push(container.children[i].outerHTML.replace(/<\/?[^>]+(>|$)/g, ""));
}
console.log("plainTextArray = ",elements);
let bodyHtml = document.getElementsByTagName('div')["0"].innerHTML;
let plainTextArray = bodyHtml.replace(/<\/?[^>]+(>|$)/g, "//").split("//").filter(Boolean)
console.log('plainTextArray = ',plainTextArray);
<body>
<div id="container"><p>Hello there</p><h1>Thank you</h1></div>
</body>
您可以像这样使用从子元素中获取所有文本。
let nodeList = document.getElementById('stack').querySelectorAll('*');
let list = [];
nodeList.forEach(function(val){
list.push(val.outerHTML)
})
console.log(list);
<div id="stack">
<p>Hello there</p>
<h1>Thank you</h1>
</div>