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

【问题标题】：How to add span element around specific @words如何在特定 @words 周围添加 span 元素
【发布时间】：2017-11-01 22:34:41
【问题描述】：

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

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

"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。

或者可能必须定制。

任何想法都将不胜感激。

【问题讨论】：

你可以使用 jQuery wrapInner() 函数

标签： jquery css hashtag mention

【解决方案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>

【讨论】：