Question

我正在尝试为字符串的特定部分上色，这是我到目前为止所拥有的：

    function SpecialColor(num) {
   const color = document.getElementById(`alignColor${num}`).value;
      let realnum = num - 1;
     const input = document.getElementById("rolealign");
    const splited = input.innerHTML.split(" ");
  let result = input.innerHTML;
  let winner =  splited[realnum];
  result.replace(winner, `<span style="color:${color};"> ${winner} <span>`);
  console.log(result);
  input.innerHTML = result;
}

假设字符串为Miki Mouse。

什么都没发生。

结果-保持为Miki Mouse
获胜者-Miki
已拆分-["Miki", "Mouse"]
color-从颜色输入中提取的值。

有人可以向我解释为什么我的代码不起作用，并向我指出其他一些问题吗？谢谢。

Answer 1

问题在于线路

result.replace(winner, `<span style="color:${color};"> ${winner} <span>`);

什么都不做-它使用HTML标记创建一个新字符串，然后该新字符串未分配给任何内容，因此不再使用它，很快就会被垃圾回收。基元（包括字符串）是不可变的，因此无法就地.replace-必须显式地分配给新变量：

function SpecialColor(num) {
  const color = document.getElementById(`alignColor${num}`).value;
  const realnum = num - 1;
  const input = document.getElementById("rolealign");
  const splited = input.innerHTML.split(" ");
  const result = input.innerHTML;
  const winner = splited[realnum];
  const htmlResult = result.replace(winner, `<span style="color:${color};"> ${winner} <span>`);
  console.log(htmlResult);
  input.innerHTML = htmlResult;
}

为字符串的特定部分上色

1 个答案: