Wie man das Element span um bestimmte @words hinzufügt

Question

Ich habe Benutzer Feedback Board und ich habe @mentioning zu anderen Benutzern auf der Website implementiert. Sobald der andere Benutzer erwähnt wird, erscheint er in seinem Posteingang mit einer Nachricht, dass sie "@ ___ Post" genannt wurden.

Wenn der Post-Displays, es derzeit die @mention als Klartext zeigt - wie auch in:

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

jedoch, was ich ist legte ein <span> Element um @mention Namen machen will, es zu machen blau oder macht irgendwie die @mention besser - wie in:

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

ich bin nicht vertraut mit regex und ich bin nicht einmal sicher, ob dies der richtige Weg ist.

Ich glaube nicht, das eine CSS Sache ist und müsste entweder:

a) Ausspucken on the fly über PHP
b) Behandeln mit einem kleinen jQuery (bevorzugt)

Ich könnte einfach gehen durch str_replace() und finden Sie jede @ und versuchen, einige verrückte Text ersetzen bewegen, aber das Problem ist, dass jeder Benutzername keine feste Länge ist. Also wie würde ich in der Lage sein zu sagen, wie lange jeder Benutzername durch eine Zeichenfolge in einem <span> Element ersetzt ersetzen soll?

Wie auch immer, das klingt wie ein schmutziger Hack.

Ich würde denken, dass einige Plugins für dieses bereits gemacht wurden, @mentioning oder #hashtaging zu implementieren.

Oder möglicherweise muss es nach Maß hergestellt werden.

Irgendwelche Ideen würden geschätzt.

Answer 1

Ein einfacher jQuery Weg, teilen Sie die Zeichenfolge durch Leerzeichen, so erhalten Sie ein Array aus der Textzeichenfolge, dann überprüfen, ob ein Wort mit # oder @ beginnen dann mit span umspannen und es zurück in ein Array, am Ende beitreten das Array und Ausgabe als HTML zurück.

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