时间戳

首页 > 解决方案 > 为字符串的特定部分着色

javascript - 为字符串的特定部分着色

问题描述

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

    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"]
颜色 - 从颜色输入中取出的值。

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

标签： javascripthtml

解决方案

问题是这条线

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;
}

推荐阅读