代码之家 › 专栏 › 技术社区 › sir-haver

javascript如何将纯文本HTML元素拆分为数组?

plaintext html javascript

0

sir-haver · 技术社区 · 6 年前

如果我有一个包含HTML元素的字符串,那么创建兄弟HTML元素数组的有效方法是什么?

尝试将indexof与开始标记“<”的第一个字母一起使用,而最后一个结束标记将变得复杂,因为可能存在子元素。

简单例子:

<p>Hello there</p>

<h1>Thank you</h1>

事先谢谢!

4 回复 | 直到 6 年前

1

Arshpreet Wadehra 6 年前

使用regex和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']

2

0

Cat 6 年前

我相信这就是你想做的。

  <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>

3

0

Mohan M 6 年前

您可以使用regex来解决这个问题。

使用regex查找所有的开始和结束标记,并替换为“/”(其他内容),然后拆分它,然后使用filter(布尔值)筛选(“”)。

代码:

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>

4

0

Dominic Amal Joe F 6 年前

您可以使用类似的方法从子元素中获取所有文本。

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>