Как заменить ссылки в строке на кликабельные версии, используя регулярное выражение jquery? - PullRequest
Новая
       0

Как заменить ссылки в строке на кликабельные версии, используя регулярное выражение jquery?

3 голосов
/ 02 декабря 2011

См. Строку 8 в коде ниже, с комментарием: 

<script>
$(function(){
    $.getJSON('http://twitter.com/status/user_timeline/TWITTER.json?count=1&callback=?',twitterJSON);
    function twitterJSON(data){
        var twitterOut     = '<p>'+data[0].text+'</p><strong>- '+data[0].user.name+'</strong>';
        var twitterOutAt   = twitterOut.replace(/\B@([\w-]+)/gm,'<a href="http://twitter.com/$1">@$1</a>');
        var twitterOutHash = twitterOutAt.replace(/\B#([\w-]+)/gm,'<a href="http://search.twitter.com/search?q=$1">#$1</a>');
        var twitterOutDone = twitterOutHash.replace(/(href="|<a.*?>)?[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/g,'<a href="$1">$1</a>'); // not working :(
        $('.twitter').html(twitterOutDone);
    }
});
</script>

Буду очень признателен за любую помощь в рефакторинге кода!

Например: должен быть способ связать .replace, чтобы не нужно было назначать новый var снова и снова. Я пробовал var twitterOut.replace().replace()..., но это не работает: (

Ответы [ 2 ]

6 голосов
/ 02 декабря 2011

Вот рабочая функция, которую я использую: 

jQuery.fn.urlize = function() {
    if (this.length > 0) {
        this.each(function(i, obj){
            // making links active
            var x = $(obj).html();
            var list = x.match( /\b(http:\/\/|www\.|http:\/\/www\.)[^ <]{2,200}\b/g );
            if (list) {
                for ( i = 0; i < list.length; i++ ) {
                    var prot = list[i].indexOf('http://') === 0 || list[i].indexOf('https://') === 0 ? '' : 'http://';
                    x = x.replace( list[i], "<a target='_blank' href='" + prot + list[i] + "'>"+ list[i] + "</a>" );
                }

            }
            $(obj).html(x);
        });
    }
};

В вашем случае: 

$('.twitter').urlize();
2 голосов
/ 02 декабря 2011

Я нашел решение здесь: https://stackoverflow.com/a/3890175/1076933

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Twitter</title>
</head>
<body id="top">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

    $(function() {

        $.getJSON("http://twitter.com/status/user_timeline/envato.json?count=1&callback=?", twitterJSON);

        function twitterJSON(data) {
            var twitterOut = data[0].text;
            twitterOut = twitterOut
                .replace(/(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim, '<a href="$1">$1</a>')
                .replace(/\B#([\w-]+)/gm, '<a href="http://search.twitter.com/search?q=$1">#$1</a>')
                .replace(/\B@([\w-]+)/gm, '<a href="http://twitter.com/$1">@$1</a>');
            $("body").html(twitterOut);
        };

    });

</script>
</body>
</html>

Благодаря Silver Light , его функция работает очаровательно! 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Twitter</title>
</head>
<body id="top">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

    $(function() {

        jQuery.fn.urlize = function() {
            if (this.length > 0) {
                this.each(function(i, obj) {
                    var x = $(obj).html();
                    var list = x.match(/\b(http:\/\/|www\.|http:\/\/www\.)[^ <]{2,200}\b/g);
                    if (list) {
                        for (i = 0; i < list.length; i++) {
                            var prot = list[i].indexOf("http://") === 0 || list[i].indexOf("https://") === 0 ? "" : "http://";
                            x = x.replace(list[i], "<a target='_blank' href='" + prot + list[i] + "'>" + list[i] + "</a>");
                        }
                    }
                    $(obj).html(x);
                })
            }
        };

        $.getJSON("http://twitter.com/status/user_timeline/envato.json?count=1&callback=?", twitterJSON);

        function twitterJSON(data) {
            var twitterOut = data[0].text;
            twitterOut = twitterOut
                .replace(/\B#([\w-]+)/gm, '<a href="http://search.twitter.com/search?q=$1">#$1</a>')
                .replace(/\B@([\w-]+)/gm, '<a href="http://twitter.com/$1">@$1</a>');
            $("body").html(twitterOut).urlize();
        };

    });

</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...