如何拆分html字符串并获得带有值的不同标记

Question

所以我有很多html字符串，我想拆分并得到适当的html标记。

将字符串设为<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p> <h6>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</h6> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</h3>

现在我想把数据作为

[
  ["h2","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum"],
  ["p","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum"],
  ["h6","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum"],
  ["h3","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum"]
[

Answer 1

您可以创建一个虚拟DOM元素：

const dummy = document.createElement("div"); 

将字符串追加为innerHTML：

dummy.innerHTML = 'YOUR_STRING';

然后你可以像这样遍历/映射它的孩子：

const mappedChildren = Array.from(dummy.children).map(child => ({ tag: child.tagName, text: child.innerHTML}));

Answer 2

​

const input = '<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p> <h6>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</h6> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</h3>\n'

const parse = (s) => {
  const regex = /<(.+?)>(.+?)<\/.+?>/g;
  let match = regex.exec(s);
  const result = []
  while (match != null) {
    result.push([match[1], match[2]])
    match = regex.exec(s);
  }
  return result
}

console.log(parse(input))

​

regex将捕获带有内容的标记，捕获组将分别捕获tagstag名称和内容。

Answer 3

您可以使用

var element = document.createElement('div');
element.innerHTML = 'your string...';
var result = [].slice.call(element.children).map(c => ([c.tagName.toLowerCase(), c.innerText]))