如何用JavaScript按颜色将span标签内容分类到不同数组？

以下提供两种场景的解决方案：

场景1：操作页面DOM中的span元素 #

如果目标span已经在当前页面的DOM结构中，可以直接通过DOM API筛选：

// 初始化存储数组
const blueSpanContents = [];
const redSpanContents = [];

// 获取所有span标签
const spans = document.querySelectorAll('span');

spans.forEach(span => {
    // 统一转为小写，避免大小写匹配问题
    const spanColor = span.style.color.toLowerCase();
    const content = span.textContent.trim();
    
    if (spanColor === 'blue') {
        blueSpanContents.push(content);
    } else if (spanColor === 'red') {
        redSpanContents.push(content);
    }
});

// 输出结果
console.log('蓝色span内容：', blueSpanContents);
console.log('红色span内容：', redSpanContents);

场景2：处理HTML字符串中的span标签 #

如果只有HTML文本字符串，可通过临时DOM元素解析后再筛选：

// 你的HTML字符串
const htmlString = `
<p><span style="color: blue;">Yes this one now</span></p>
<p><br></p>
<p>The main configuration value is this</p>
<p><br></p>
<p>!</p>
<p>enable</p>
<p>configure terminal</p>
<p>server name <span style="color: red;">Server Name</span></p>
<p>enable secret <span style="color: red;">Server Pass</span></p>
<p>no ip domain-lookup</p>
<p>ip domain name <span style="color: red;">region</span>.google.com</p>
<p>!</p>
<p><br></p>
`;

const blueContents = [];
const redContents = [];

// 创建临时div用于解析HTML
const tempContainer = document.createElement('div');
tempContainer.innerHTML = htmlString;

// 筛选逻辑同场景1
const allSpans = tempContainer.querySelectorAll('span');
allSpans.forEach(span => {
    const color = span.style.color.toLowerCase();
    const text = span.textContent.trim();
    
    if (color === 'blue') {
        blueContents.push(text);
    } else if (color === 'red') {
        redContents.push(text);
    }
});

console.log('蓝色span内容：', blueContents);
console.log('红色span内容：', redContents);

额外说明 #

如果span的color样式是通过CSS类而非内联style设置的，需要用getComputedStyle(span).color来获取实际生效的颜色值，再进行匹配（注意getComputedStyle返回的是rgb格式，比如红色会返回rgb(255, 0, 0)）。

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