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中的更改减少到最低限度。

使用jQuery查找twitter hashtags，并应用链接

3 个答案: