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

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>

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

Replace a word in a string with a styled span dynamically

html

javascript

css

dynamic