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

Question

我有用户反馈板，我已经在网站上实现了对其他用户的@mentioning。一旦其他用户被@mentioned，它就会显示在他们的收件箱中，并通知他们“@mentioned on ___ post”。

当 post 显示时，它当前将 @mention 显示为纯文本 - 如：

"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 back.

$('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 xyz@gmail.com"</div>

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

How to add span element around specific @words

css

jquery

hashtag

mention