在 HTML 中找到 Twitter 句柄，并创建一个链接答案

【问题标题】：Find Twitter Handle in HTML, and make a link在 HTML 中找到 Twitter 句柄，并创建一个链接
【发布时间】：2013-09-09 23:54:34
【问题描述】：

我在 HTML 页面上显示推文，并且会阅读推文：

“Lorem ipsum dolor @username conspecetur。”或者 “真的很喜欢@example 的节目”

如何在这个字符串中搜索所有 twitter 句柄，并让它们成为链接到该用户的 twitter 帐户的锚标记？

也会对#hashtags 的类似内容感兴趣。

推文的 HTML 如下所示我要转换为锚标签的@usernames 在<span class="tweet">

<div id="realtime_rollover_tweet_text">
    <a href="http://twitter.com/IsabelleOC/statuses/309314847345106945" class="twitter-handle" target="_blank">Isabelle O'Carroll</a>
    <span class="tweet">Forget ruffles and ridiculousness  check my kickass cycle outfit feat @NikeUK, @Sophie_Hulme, Ashish and @Topshop</span>
    <span class="category">bloggers</span>
</div>

【问题讨论】：

如果您向我们展示 html 可能会有所帮助。到目前为止，您尝试过什么？
刚刚添加。重要的部分在<span class="tweet">
所以你有用于推特句柄？
是的，我愿意@RahulPatil
更准确地说是@RahulPatil，这就是实际的推文文本所在。

标签： jquery html twitter hyperlink handle

【解决方案1】：

解决方案非常简单.. 只需使用 .each 迭代并将字符串替换为所需的 URL

更新答案

工作演示：http://jsfiddle.net/cmzqv/1/

解决方案：使用正则表达式

   function(i,html) {
    return html.replace(/(@\w+)/g, '<span class="twitterHandle">$&</span>');
});

工作演示：http://jsfiddle.net/cmzqv/

代码：

$(document).ready(function(){
    $('.twitter').each(function() {
            var handle = $(this).text().slice(1);
        var handleUrl = "<span class='twitter'><a href='https://www.twitter.com/"+handle+"'>"+$(this).text()+"</a></span>";
               $(this).replaceWith(handleUrl); 
    });
});

【讨论】：