Question

我有用户反馈板，我已将@mentioning实施到网站上的其他用户。一旦另一个用户被提及，它就会在他们的收件箱中显示一条通知，告知他们在___ post＆＃34; @上提及。

当帖子显示时，它当前将@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格式输出。

$('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元素

1 个答案: