如何不使用.innerHTML实现带颜色文本的HTML安全展示？

问题背景 #

需要在HTML元素中展示用户输入的字符串，仅将特定片段（如'abc'）设为蓝色，其余内容（如'def'）保持默认颜色。原方案通过生成带内联样式的HTML字符串，再用.innerHTML插入，但因内容来自用户输入，存在XSS安全风险，需寻找替代实现方式。

原生成HTML字符串的函数：

function changeTextColorArr (textArr, colorArr){
    resultArr = [];
    for(let i = 0; i < textArr.length; i++)
    {
        color = colorArr[i] === "" ? "black" : colorArr[i];
        beginTag =   `<span style="color: ${color}">`
        endTag= '</span>';

        result = beginTag + textArr[i] + endTag;
        resultArr.push(result);
    }
    return resultArr;
}

// 使用示例
let word = changeTextColorArr(["abc"], ["blue"]) + "def"; 
console.log(word)

安全解决方案 #

方案1：直接操作DOM元素（无HTML字符串拼接） #

全程通过创建DOM节点实现，用textContent注入用户输入，彻底避免XSS风险：

// 目标容器（替换为你的实际元素）
const presentCell = document.getElementById('target-cell');

// 用户输入的内容
const coloredText = 'abc';
const defaultText = 'def';

// 创建蓝色span元素
const blueSpan = document.createElement('span');
blueSpan.style.color = 'blue';
blueSpan.textContent = coloredText;

// 创建默认颜色的文本节点
const defaultNode = document.createTextNode(defaultText);

// 清空容器并添加元素
presentCell.textContent = ''; // 清空原有内容
presentCell.appendChild(blueSpan);
presentCell.appendChild(defaultNode);

方案2：改进批量处理函数（返回DOM元素而非HTML字符串） #

如果需要批量处理多段文本与对应颜色，修改函数直接返回DOM元素数组，后续直接追加到容器中：

function changeTextColorArr(textArr, colorArr) {
  const resultArr = [];
  for (let i = 0; i < textArr.length; i++) {
      const span = document.createElement('span');
      const color = colorArr[i] === "" ? "black" : colorArr[i];

      span.style.color = color;
      span.textContent = textArr[i]; // 安全注入用户输入
      resultArr.push(span);
  }
  return resultArr;
}

// 使用示例
const presentCell = document.getElementById('target-cell');
// 获取着色元素数组
const coloredElements = changeTextColorArr(["abc"], ["blue"]);
// 创建默认文本节点
const defaultNode = document.createTextNode('def');

// 清空容器并添加所有元素
presentCell.textContent = '';
coloredElements.forEach(el => presentCell.appendChild(el));
presentCell.appendChild(defaultNode);

关于你更新的函数的说明 #

你更新后的函数改用document.createElement创建span，并通过textContent设置内容，已经大幅降低了XSS风险，但如果最终仍通过拼接outerHTML生成字符串再用.innerHTML插入，若colorArr中的颜色值来自用户输入，可能存在样式注入风险。建议直接操作DOM元素而非HTML字符串，以实现完全安全的效果。

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