javascript - 在字符串中的单词周围添加标签+类名

Question

我正在尝试在包含 @ 字符的单词周围添加一个 span 标记 + 类名。

我当前的代码只有在找到时才返回真值，不幸的是我不知道如何添加标签+类名。执行此操作的正确方法是什么？

var string = "hello @peter how are you?", substring = "@";
  if (string.indexOf(substring) > -1){
     //add span tag + classname around @peter 

  }

endresult 应将变量更改为:

var string = "hello <span class='mentioned'>@peter</span> how are you?"

Answer 1

一种选择是使用 .replace()方法。表达式 (@\S+)是匹配 @ 的捕获组字符字面意思，后跟一个或多个非空白字符。自 $1代表第一个捕获组，匹配被简单地替换为 <span class='mentioned'>$1</span> ，它基本上包装了比赛。

var string = "hello @peter how are you?";
string = string.replace(/(@\S+)/g, "<span class='mentioned'>$1</span>");

// "hello <span class='mentioned'>@peter</span> how are you?"

但是，根据输入的不同，实际上使用 \w 可能会更好而不是 \S .这样做时，只有字符 [A-Za-z0-9_]将被匹配(而不是除任何非空白字符以外的所有内容)。

例如:

var string = "hello @peter97... how are you?";
string = string.replace(/(@\w+)/g, "<span class='mentioned'>$1</span>");

// "hello <span class='mentioned'>@peter97</span>... how are you?"