如何将 HTML 字符串拆分为单词和标签数组答案

【问题标题】：How do I split a string of HTML into an array of words and tags如何将 HTML 字符串拆分为单词和标签数组
【发布时间】：2018-04-19 03:20:31
【问题描述】：

如何将 HTML 字符串拆分为一个数组，以便每个单词都是数组中的一个项目，包括围绕它的标签？

//So this string:
var myHTMLString = "Something, something <span @click='changeSelected(0)' id='0' class='wrong'>else</span> is foo <span @click='changeSelected(0)' id='0' class='wrong'>hello world</span> to all.";

//Would become this:
var HTMLAry = ["Something,", "something", "<span @click='changeSelected(0)' id='0' class='wrong'>else</span>", "is", "foo", "<span @click='changeSelected(0)' id='0' class='wrong'>hello world</span>", "to", "all."];

我们可以依赖的东西：

标签将始终是span 标签，其属性与上例完全相同^
并非每个单词都有span 标签。
有些单词可能有多个空格分隔。

我怎样才能做到这一点？

我能想到的唯一可能适用于此的是某种正则表达式，但是其他somewhat similar answers 表示，在大多数情况下，在使用 HTML 标签时应该远离正则表达式。但正则表达式是我能想象的唯一可行的方法。

var myHTMLString = "Something, something <span @click='changeSelected(0)' id='0' class='wrong'>else</span> is foo <span @click='changeSelected(0)' id='0' class='wrong'>hello world</span> to all.";

//This^ would become this:

var HTMLAry = ["Something,", "something", "<span @click='changeSelected(0)' id='0' class='wrong'>else</span>", "is", "foo", "<span @click='changeSelected(0)' id='0' class='wrong'>hello world</span>", "to", "all."];
    
console.log(myHTMLString.match(/<span.*?>.*?<\/span\>/g));

【问题讨论】：

标签： javascript regex

【解决方案1】：

创建一个元素，将元素 html 设置为您的字符串，获取子节点，将文本节点拆分为空格并过滤掉空，获取其他节点的 outerHTML，然后展平数组。

var myHTMLString = "Something, something <span @click='changeSelected(0)' id='0' class='wrong'>else</span> is foo <span @click='changeSelected(0)' id='0' class='wrong'>hello world</span> to all.";

var el = document.createElement('div');

el.innerHTML = myHTMLString;

var arr = Array.from(el.childNodes).map(e => e.outerHTML || e.nodeValue.split(' ').filter(t => t));

console.log([].concat.apply([], arr))

【讨论】：