Как я могу заменить любое слово в строке, которая начинается с символа '@', как это делает Twitter, в Javascript / JQuery?

Question

Я пытаюсь сделать любой '@sometext' HTML-ссылкой, где к URL-адресу также добавлен 'sometext'. то есть «@sometext» становится ссылкой на «http://someurl.com/sometext'.», но может измениться, потому что ссылка будет отличаться каждый раз, в зависимости от того, что такое «sometext». Я пишу это в JavaScript и JQuery. Я пытаюсь воссоздать ссылки, похожие на ссылки в Твиттере, когда кто-то вставляет @username, которое ссылается на страницу профиля этого человека.

У меня уже есть код, чтобы найти URL-адреса в тексте и сделать их HTML-ссылками. Но у меня нет ничего написанного о том, что я сейчас пытаюсь сделать с символом «@». Я не смог найти ничего, чтобы помочь мне.

Это код, который я должен сделать, URL-ссылки HTML:

 var message = this.text;

 var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;

 message = message.replace(exp,"<a href='$1' target='_new'>$1</a>");

 resultDiv += message + "</div>";

Хорошо, теперь мой код выглядит так, и он работает, за исключением того, что для некоторых ссылок @sometext есть прямая ':' после строки, @sometext: и поэтому ссылка является неработающей ссылкой Как я могу удалить или игнорировать ':' при создании URL, который будет HTML-ссылкой?

$(data.results).each(function() {

var userLink = "<a href=\"http://twitter.com/" + this.from_user + "\">";

var replyTo = this.to_user;

var resultDiv = "<div class=\"finalResult\">";

resultDiv += "<fieldset class=\"tweetReturn\" style = \"width: 75%;\">";

resultDiv += "<div><div id=\"userImage\"><img src=\"" + this.profile_image_url + "\" height=\"48px\" width=\"48px\"/></div>";

resultDiv += "<div id=\"userMessage\"><strong>" + userLink + this.from_user + "</a></strong> &nbsp;";

var message = this.text;

var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;

message = message.replace(exp,"<a href='$1'>$1</a>");

message = message.replace( /(^|\s)@(\S+)/g, '$1@<a href=\"http://twitter.com/$2\">$2</a>');                                             
message = message.replace( /(^|\s)#(\S+)/g, '$1<a href=\"http://search.twitter.com/search?q=%23\$2\">#$2</a>');

resultDiv += message + "</div>";

resultDiv += "<div id=\"twitterLink\"><a href=\"http://www.twitter.com\"><img src=\"http://twitter-badges.s3.amazonaws.com/twitter-b.png\" alt=\"Visit Twitter\"/></a></div>"

resultDiv += "<div id=\"timestamp\">" + this.created_at + "</div>";

resultDiv += "</div></div></fieldset>";

resultDiv += '</div><br />';


$("#displayResults").append(resultDiv);     

});

Answer 1

Оформление заказа эта запись от инженера Twitter Дастина Диаса для связывания ссылок, @ сообщений и хэшей.

var ify = function() {
  return {
    "link": function(t) {
      return t.replace(/(^|\s+)(https*\:\/\/\S+[^\.\s+])/g, function(m, m1, link) {
        return m1 + '<a href=' + link + '>' + ((link.length > 25) ? link.substr(0, 24) + '...' : link) + '</a>';
      });
    },
    "at": function(t) {
      return t.replace(/(^|\s+)\@([a-zA-Z0-9_]{1,15})/g, function(m, m1, m2) {
        return m1 + '@<a href="http://twitter.com/' + m2 + '">' + m2 + '</a>';
      });
    },
    "hash": function(t) {
      return t.replace(/(^|\s+)\#([a-zA-Z0-9_]+)/g, function(m, m1, m2) {
        return m1 + '#<a href="http://search.twitter.com/search?q=%23' + m2 + '">' + m2 + '</a>';
      });
    },
    "clean": function(tweet) {
      return this.hash(this.at(this.link(tweet)));
    }
  };
}();

Answer 2

Это должно работать

 function convertAts( text )
 {
   return text.replace( /(^|\s)@(\S+)/g, '$1<a href="http://someurl.com/$2">@$2</a>');
 }

Это заменит @something только тогда, когда он один, а не рядом с чем-то другим (например, somethingelse@something)

Answer 3

Полагаю, вы хотите что-то вроде этого:

function makeLinks(text)
{
    text = text.replace(/@(\w+)\b/, '<a href="http://www.someurl.com/$1">@$1</a>');
    return text;
}