如何在特定@words周围添加span元素

Question

我有用户反馈板，并且我已经向网站上的其他用户实施了@提及。一旦其他用户被@提及，它就会显示在他们的收件箱中，并附有一条通知，表明他们“在 ___ 帖子上被@提及”。

当帖子显示时，它当前将@提及显示为纯文本 - 如：

"Hi @JoeBlow, nice work today..."

但是我想做的是在 @mention 名称周围放置一个

<span>

元素，使其变为蓝色或以某种方式使 @mention 脱颖而出 - 如：

Hi <span style="font-color:blue">@JoeBlow</span>, nice work today..."

我不熟悉正则表达式，我什至不确定这是否是正确的方法。

我不认为这是 CSS 的事情，并且必须是：

a) 通过 PHP 即时吐出
b) 使用一点 jQuery 进行处理（最好）

我可以简单地通过

str_replace()

找到每个

@

并尝试进行一些疯狂的替换文本移动，但问题是每个用户名不是固定长度。那么我如何才能知道每个用户名需要替换为包含在

<span>

元素中的字符串呢？

无论哪种方式，这听起来都是一个肮脏的黑客行为。

我认为现在已经为此制作了一些插件来实现@mentioning或#hashtaging。

或者可能必须定制。

任何想法将不胜感激。

Answer 1

一个简单的 jQuery 方法，用空格分割字符串，以便从文本字符串中获取一个数组，然后检查是否有任何以 # 或 @ 开头的单词，然后用 span 包裹并将其放回数组，最后加入数组并以 HTML 形式输出回来。

$('div').each(function() {
  var textArry = $(this).text().split(" ");
  $.each(textArry, function(index) {
    if (textArry[index].match("^#") || textArry[index].match("^@"))
      textArry[index] = '<span class="mention">' + textArry[index] + '</span>';
  });
  var output = textArry.join(' ');
  $(this).html(output);
});

.mention {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>"Hi @JoeBlow, nice work today..."</div>
<div>"Hi @JoeBlow, @JackWhat nice work today..."</div>
<div>"Hi #JoeBlow, nice work today..."</div>
<div>"Hi Joe@Blow, my e-mail is [email protected]"</div>