使用str.match将字符串转为数组时失效，需提取HTML元素文本生成变量

我明白你想从这段HTML代码里提取所有<span class="topcmm-123flashchat-light-color-panel-sound-text">标签内的文本内容，生成一个数组，但用str.match没成功。这大概率是因为正则表达式没适配转义后的HTML结构，或者直接用正则处理HTML的方式不够稳妥——毕竟HTML是结构化内容，用DOM解析会更可靠。

方法一：改进正则表达式（适合简单场景） #

如果一定要用str.match相关的正则方案，试试下面的代码。它会适配你HTML字符串里的转义字符（比如"代替双引号），并循环提取所有匹配的文本：

const htmlStr = '<p><code>&lt;div id=&quot;topcmm-123flashchat-sound-messages-contents&quot; style=&quot;height:auto;&quot;&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Gasp for supprise&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Giggle&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Say hello&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Come on&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Kick somebody out&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Kiss somebody&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Scream&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Yawn for sleepy&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onm</code></p>';

// 匹配转义后的span标签及内部文本
const regex = /&lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;([^&]+)&lt;\/span&gt;/g;
const soundTextArray = [];
let matchResult;

// 循环提取所有捕获组的文本
while ((matchResult = regex.exec(htmlStr)) !== null) {
  soundTextArray.push(matchResult[1].trim());
}

console.log(soundTextArray);

执行后会得到你想要的数组：

["Gasp for supprise", "Giggle", "Say hello", "Come on", "Kick somebody out", "Kiss somebody", "Scream", "Yawn for sleepy"]

方法二：用DOM解析（更可靠，推荐） #

处理HTML最稳妥的方式是用浏览器的DOM API，它能自动处理HTML结构的各种细节，避免正则的局限性。代码如下：

const htmlStr = '<p><code>&lt;div id=&quot;topcmm-123flashchat-sound-messages-contents&quot; style=&quot;height:auto;&quot;&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Gasp for supprise&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Giggle&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Say hello&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Come on&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Kick somebody out&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Kiss somebody&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Scream&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onmouseover=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block-over\'&quot; onmouseout=&quot;this.className=\'topcmm-123flashchat-light-color-panel-singe-bar-block\'&quot;&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-text&quot;&gt;Yawn for sleepy&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-test-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;topcmm-123flashchat-light-color-panel-sound-sent-icon&quot;&gt;&lt;/span&gt; &lt;/div&gt;&lt;div class=&quot;topcmm-123flashchat-light-color-panel-singe-bar-block&quot; onm</code></p>';

// 1. 还原转义的HTML字符
const decodedHtml = htmlStr.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"');

// 2. 创建临时DOM元素解析HTML
const tempContainer = document.createElement('div');
tempContainer.innerHTML = decodedHtml;

// 3. 查找所有目标span元素并提取文本
const soundTextElements = tempContainer.querySelectorAll('.topcmm-123flashchat-light-color-panel-sound-text');
const soundTextArray = Array.from(soundTextElements).map(el => el.textContent.trim());

console.log(soundTextArray);

这个方法的优势在于，不管HTML结构怎么微调（比如属性顺序变化、多余空格），只要目标class名称不变，就能准确提取内容，比正则方案更稳定。

为什么你的str.match没成功？ #

大概率是两个原因：一是没考虑到HTML字符串里的转义字符（比如用"代替了双引号），导致正则匹配不到；二是如果用全局正则的str.match，只会返回完整的匹配字符串，不会返回捕获组里的文本内容，所以需要用regex.exec循环来提取目标文本。

内容的提问来源于stack exchange，提问作者Cain Nuke