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

Question

如何将 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));

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