如何提取文本框中带有_ngcontent-c6属性的<span>标签内的所有内容

嘿，我来帮你搞定这个提取需求！针对带有_ngcontent-c6=""属性的<span>标签内容提取，这里有两种实用靠谱的方法，根据你的使用场景选就行：

方法一：正则表达式（纯文本处理场景） #

如果是在后端代码或者文本编辑器里处理纯HTML文本，正则表达式是快速的选择。我们可以用匹配规则精准捕获目标标签内的文本：

示例代码（JavaScript）： #

// 你的输入文本
const inputText = '<span _ngcontent-c6="">1</span> <span _ngcontent-c6="">2</span> <span _ngcontent-c6="">3</span> <span _ngcontent-c6="">4</span> <span _ngcontent-c6="">5</span>';
// 匹配目标span标签的正则，捕获标签内的文本
const regex = /<span _ngcontent-c6="">([^<]+)<\/span>/g;
let match;
const resultArr = [];

// 遍历所有匹配结果
while ((match = regex.exec(inputText)) !== null) {
  resultArr.push(match[1]);
}

// 拼接成空格分隔的字符串
console.log(resultArr.join(' ')); // 输出：1 2 3 4 5

说明：这个正则会精准匹配带有_ngcontent-c6=""属性的span标签，捕获标签内的纯文本内容，最后把所有结果拼接成你需要的格式。

方法二：DOM操作（前端浏览器环境，更可靠） #

如果是在浏览器环境下处理（比如前端页面调试、Chrome控制台），用DOM原生方法会比正则更稳妥——毕竟正则处理复杂HTML容易翻车，DOM是原生解析HTML结构的：

示例代码（浏览器控制台运行）： #

// 选择所有带有_ngcontent-c6=""属性的span元素
const targetSpans = document.querySelectorAll('span[_ngcontent-c6=""]');
// 提取每个span的文本内容，再拼接成空格分隔的字符串
const result = Array.from(targetSpans).map(span => span.textContent).join(' ');

console.log(result); // 输出：1 2 3 4 5

说明：querySelectorAll是浏览器原生的选择器方法，能精准定位到目标元素，提取文本内容也不会出错，适合前端场景使用。

小提醒 #

要注意的是，_ngcontent-c6是Angular的样式隔离属性，这个后缀c6可能会随着组件的编译、项目结构变化而改变。如果是长期维护的代码，建议给这些span标签加个自定义的class或者data属性（比如<span class="data-item" _ngcontent-c6="">...</span>），之后用.data-item来选择元素，这样就不用担心属性变化导致代码失效啦！

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