1

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

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

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

但是我想要做的是<span>在@mention 名称周围放置一个元素以使其变为蓝色或以某种方式使@mention 脱颖而出 - 如：

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

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

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

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

我可以简单地str_replace()找到每个@并尝试做一些疯狂的替换文本移动，但问题是每个用户名不是固定长度。那么我怎么能知道每个用户名要被一个包裹在一个<span>元素中的字符串替换多长时间呢？

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

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

或者可能它必须是定制的。

任何想法，将不胜感激。

4

1 回答 1

4

一个简单的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>

于 2017-06-01T00:06:15.737 回答