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

我有用户反馈板，并且已经对网站上的其他用户实施了@tiontioning。一旦其他用户被提及，就会在收件箱中显示他们“在___发布后提及”。如何在特定的@words周围添加span元素

当后显示，它目前展示了@mention为纯文本 - 如：

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

但是我想要做的就是把周围@mention名的<span>元素使它蓝色或以某种方式使@mention突出 - 如：

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

我不熟悉正则表达式，我甚至不知道这是正确的方式。

我不认为这是一个CSS的事情，必须是两种：

一）吐出上通过PHP动态
b）用一点点的jQuery（最好）处理

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

无论哪种方式，这听起来像一个肮脏的黑客。

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

或者可能它必须定制。

任何想法，将不胜感激。

来源

2017-05-31 Walker Farrow

你可以使用jQuery的wrapInner（）函数 – LebCit

一个简单的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 [email protected], my e-mail is [email protected]"</div>

来源

2017-06-01 00:06:15

感谢，完美的作品:) –

@WalkerFarrow酷，运气好的编码 –

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

回答

相关问题