时间戳

首页 > 解决方案 > 在Javascript中按html元素拆分

javascript - 在Javascript中按html元素拆分

问题描述

我有一堆通常看起来像这样的字符串：

string 1<div>string 2<br></div>string 3

string 1<div>string 2<br></div><div>string 3<br></div>

<div>string 1<br></div><div>string 2<br></div><div>string 3<br></div>

我需要将文本（元素内部和外部/元素之间，如上所示）提取到这样的数组中：

['string 1', 'string 2', 'string 3']

有没有办法在纯 Javascript 中做到这一点？

我试过这样的事情：

console.log(text.split(/<div>(.*)<br><\/div>/g))

但它只适用于第一个：

[ 'string 1', 'string 2', 'string 3' ]

虽然它在最后两个变体上失败了：

[ 'string 1', 'string 2<br></div><div>string 3', '' ]

[ '', 'string 1<br></div><div>string 2<br></div><div>string 3', '' ]

标签： javascripthtml

解决方案

在解析 HTML 方面，纯 JavaScript 方法通常比正则表达式更好。您可以创建一个template元素，将 HTML 加载到其中，然后用于Array.filter获取所有作为文本节点的子节点，最后返回它们的textContent：

const html = [
  'string 1<div>string 2<br></div>string 3',
  'string 1<div>string 2<br></div><div>string 3<br></div>',
  '<div>string 1<br></div><div>string 2<br></div><div>string 3<br></div>'
]

const getTextContent = (html) => {
  let tmp = document.createElement('template');
  tmp.innerHTML = html;
  const textNodes = [].filter.call(tmp.content.childNodes, n => n.nodeType = Node.TEXT_NODE);
  return textNodes.map(o => o.textContent);
}

html.forEach(h => console.log(getTextContent(h)));

推荐阅读