使用jQuery选择并过滤innerHTML文本

时间:2012-08-15 11:42:06

标签: jquery filtering innerhtml

我还有另外一个问题,虽然我认为这个问题可能不那么平凡。但是快速免责声明,这个更开放,所以让我首先说我不是在寻找一个完整的解决方案来解决我在这里开的更大的问题,如果我伸出极限,我会提前道歉可接受的最小参考码包含。我尊重你的时间,而且我更喜欢自己把各个部分放在一起:P

顺便说一句,这就是问题所在: 我已经设置了一个PHP函数,它从Twitter提要中提取文本,然后将其作为网站上的“社交媒体”侧边栏发布。麻烦的是,推文中包含的链接正在被复制为简单文本。例如:

    <p>Last night saw the USA win gold in Women's Beach Volleyball---today at 1pm... the
    USA WOMEN SOCCER team will go... http://t.co/M7rtaZFC</p>

我想在那里抓取那个未链接的URL,将其包装在一些友好的'a'标签中,然后以快乐的方式发送它。 我可以弄清楚除了实际过滤jQuery返回目标'http://'+字符串的其余部分之外的所有事情。

这可以使用jQuery吗?再说一遍,我不希望任何事情太深入,只是想找人指出我正确的方向。谢谢你的时间!

1 个答案:

答案 0 :(得分:2)

仅使用PHP的第一个解决方案

我不知道你是如何抓取推文的,但之前我使用过这个PHP代码,它立即用<a> - 标签打印出链接。所以,这里不需要使用JavaScript:

// get tweets
function UtilityGetLatestTweets() {

    $user       = 'username';
    $limit      = 10;
    $value      = '';

    $curl       = curl_init();

    curl_setopt($curl, CURLOPT_URL, 'http://search.twitter.com/search.atom?q=from:' . $user . '&amp;rpp=' . $limit);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_HEADER, 0);

    $result     = curl_exec($curl);
    curl_close($curl);

    $xml        = simplexml_load_string($result);

    foreach ($xml->entry as $tweet) {   
        $value .= $tweet->content; 
    }

    return $value;
}

$tweets     = UtilityGetLatestTweets();

也许这有助于你。

编辑:使用JavaScript的第二个解决方案

如果你想要一个JavaScript解决方案,你可以使用它:

的JavaScript

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}

// when document is loaded
$(document).ready(function () {
    // select all p-tags within a container
    $('#content p').each( function (key, value) {
        // replace the content
        $(value).html( replaceURLWithHTMLLinks($(value).text()) );
    });
});

HTML

<div id="content">
    <p>Some text and link http://somethingsomething.com</p> 
    <p>Some text and link http://somethingdifferent.com</p>
</div>

这假设所有<p> - 标签都包含在带有ID的容器中。

  • 它将 ID-selector 标记选择器:$('#content p')结合使用以选择所有推文
  • 之后它循环遍历所有元素:
    • 它使用$(value).text()
    • 从每个条目中获取文本
    • 使用此answer
    • 中的replaceURLWithHTMLLinks替换锚点
    • 使用<p>
    • 更新$(value).html() - 代码的HTML