ES6 - 将 HTML 字符串解析为数组

Question

我有一个 HTML 格式的字符串：

let dataString = '<p>Lorem ipsum</p> <figure><img src="" alt=""></figure> <p>Lorem ipsum 2</p> <figure><img src="" alt=""></figure>';

如何解析此字符串以获取如下标签数组？

let dataArray = [
  '<p>Lorem ipsum</p>',
  '<figure><img src="" alt=""></figure>',
  '<p>Lorem ipsum 2</p>',
  '<figure><img src="" alt=""></figure>',
];

Answer 1

把它变成一个文件DOMParser，然后取身体的孩子和.map他们的.outerHTML：

const str = '<p>Lorem ipsum</p> <figure><img src="" alt=""></figure> <p>Lorem ipsum 2</p> <figure><img src="" alt=""></figure>';

const doc = new DOMParser().parseFromString(str, 'text/html');
const arr = [...doc.body.children].map(child => child.outerHTML);
console.log(arr);

（您也可以通过创建一个元素并将元素的 设置为innerHTML字符串，然后迭代其子元素来实现这一点，但如果输入字符串不可信，这可能允许任意代码执行）