Делаем @username кликабельным jquery - PullRequest
0 голосов
/ 28 февраля 2012

Ниже код работает с библиотекой Mootools, я хотел бы, чтобы она работала с jQuery, если это возможно, мне пока не повезло.

HTML

<p id="test">@user has an email address of user@email.com. See! the regexp works @people!</p>

MooTools

$('test').set('html', $('test').get('html').replace(/\B\@([\w\-]+)/gim, function(match, name){
    return '<a href="http://twitter.com/users/' + name + '">' + match + '</a>';
}));

Скрипка

Ответы [ 3 ]

3 голосов
/ 28 февраля 2012

Попробуйте это:

$('#test').html($('#test').html().replace(/\B\@([\w\-]+)/gim, function(match, name){
    return '<a href="http://twitter.com/users/' + name + '">' + match + '</a>';
}));

Пример скрипки

1 голос
/ 28 февраля 2012

поиграл с этим немного для вас:

$('#test').html($('#test').html().replace(/\B\@([\w\-]+)/gim, function(match, name){
    return '<a href="http://twitter.com/users/' + name + '">' + match + '</a>';
}));​

Ключевые отличия:

  • поиск test по идентификатору с префиксом селектора #
  • с использованием метода element.html() для получения и установки html вместо get и set
0 голосов
/ 29 февраля 2012

Mootools нативное решение для твитов - я знаю, что вы хотите пойти по пути jquery, но для справки.

String.implement({
    linkify: function(){
        // courtesy of Jeremy Parrish (rrish.org)
        return String(this).replace(/(https?:\/\/[\w\-:;?&=+.%#\/]+)/gi, '<a href="$1">$1</a>')
            .replace(/(^|\W)@(\w+)/g, '$1<a href="http://twitter.com/$2">@$2</a>')
            .replace(/(^|\W)#(\w+)/g, '$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>');
    }
});


var tests = [
    "@user has an email address of user@email.com. See! the regexp works @people!",
    "@d_mitar likes #mootools a fair bit. http://foo.com#bar"
];



// on proto
tests.each(function(el) {
    new Element("div", {
        html: el.linkify()
    }).inject(document.body);

});

// on host object
tests.each(function(el) {
    new Element("div", {
        html: String.linkify(el)
    }).inject(document.body);

});

http://jsfiddle.net/dimitar/fG4KF/

это также касается преобразования хеш-тегов и URL-адресов

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