使用 jQuery 查找 twitter 主题标签，并应用链接

Question

首先我想说我在 jQuery 方面几乎不是专业人士，这似乎是一个非标准问题。

基本上我在 wordpress 中创建一个博客，并将其合并到循环中，它显示来自我的 Twitter 个人资料的推文。我想知道如何从这些推文中选择主题标签（例如#foo），然后将 html 链接应用到主题标签，如下所示...

<a class="hashtag" href="http://twitter.com/#search?q=foo">#foo</a>

链接还必须将主题标签的值（减去 #）放入链接的 #search?q= 部分。

这可能吗？如果可以，我该怎么做？

谢谢， 查理·瑞恩

编辑：

主题标签#foo 将成为 h1 的一部分，没有标签来区分一个词，例如

<h1>Lorem ipsum dolor sit amet #foo et adipiscing</h1>

所以基本上我需要找到所有以#开头的字符串并用上面看到的链接替换它们。

Answer 1

您将制作一个正则表达式来查找这些主题标签并用链接替换它们，使用反向引用来获取匹配的标签。

hashtag_regexp = /#([a-zA-Z0-9]+)/g;

function linkHashtags(text) {
    return text.replace(
        hashtag_regexp,
        '<a class="hashtag" href="http://twitter.com/#search?q=$1">#$1</a>'
    );
} 

$(document).ready(function(){
    $('p').each(function() {
        $(this).html(linkHashtags($(this).html()));
    });
});

编辑：我已将相关代码移到一个函数中，该函数接受带有主题标签的字符串，并返回相同的字符串，标签被链接替换。它不依赖 jQuery。

$('p').html(linkHashtags($('p').html()));

您只需将元素的 html 值传递给它，并将该值替换为调用 linkHashtags 的结果。或许可以编写一个 jQuery 插件来使其更易于使用。

Example

该正则表达式可能需要一些工作，我不确定允许在主题标签中使用哪些字符，但我想你明白了。

Answer 2

您无需处理复杂的正则表达式。当您使用 /statuses/user_timeline 从 Twitter API 请求用户时间线时，您可以将名为 include_entities 的参数设置为 true。请参阅此文档页面：

http://dev.twitter.com/doc/get/statuses/user_timeline

这将为每个称为实体的推文添加一个 JSON 对象。该实体将包含推文中每个主题标签的所有详细信息，所有这些信息都为您整齐地解析出来。您将获得主题标签的文本，以及它在推文中的开始和停止位置。您可以在显示之前将标签的链接版本替换回文本中。

Answer 3

为什么要用 jQuery 来做这件事？使用 Wordpress 插件：Twittify! 这个插件只是将 Twitter @usernames 和 `#hashtags 转换为 Twitter 上相关位置的链接。

您始终应将 DOM 中的更改降至最低。