用样式化的 span 动态替换字符串中的单词

Question

我正在尝试做一些非常简单的事情，但我很尴尬地说我无法弄清楚。我正在寻找以“@”或“#”开头的字符串中的单词，并将该单词的样式颜色设为蓝色。该字符串来自 API，因此我最初无法在跨度内设置单词。

我尝试使用带有正则表达式的字符串replace() 来查找以“@”开头的单词，并将其替换为具有相同文本但颜色为蓝色的跨度。我已经看到这个答案在整个 SO 中弹出，但是当我尝试实现它时，整个跨度都呈现为文本，而不仅仅是文本本身。此外，文本没有将颜色更改为蓝色——我得到的是<span style='color: blue;'>@user42</span>，而不仅仅是@user42。

我使用了不同的正则表达式来删除跨度以文本形式呈现到页面，但这似乎我错过了一些东西并做额外的工作来弥补我不知道的东西。

这是我尝试在不使用.replace() 的情况下解决它的方法，但我无法将新创建的跨度插入到与要删除的单词相同的位置。

tweetText[0].split(' ').forEach((word) => {
  if (word.innerText.startsWith('@') || word.innerText.startsWith('#')) {
     const span = document.createElement('span');
     span.innerText = word;
     span.style.color = 'blue';
   }
 });

如何使用replace() 查找以“@”或“#”开头的单词并将其替换为相同的文本，但颜色不同？

Answer 1

添加了颜色、背景颜色、填充和边框半径，看起来不错。

const result = document.querySelector(".result");

function colorizeSelectedText(str) {
  const result = str
    .split(" ")
    .map((word) => {
      if (word.startsWith("@") || word.startsWith("#")) {
        return `<span style='color: blue; background: bisque; padding: 0.25rem; border-radius: 4px;'>${word}</span>`;
      }
      return word;
    })
    .join(" ");
  return result;
}

const text = colorizeSelectedText(
  "This is @test for the #color that is not colored"
);

result.innerHTML = text;

<div class="result"></div>