Regex to convert a hashtag to a link without breaking existing HTML code

Question

I want to convert all urls in javascript string to links, these lines also have words starting with hashtag #.

Currently, I have created two quotation marks in the frame, one of which creates html anchor tags based on URLs, and the other creates anchor tags for hashtags (e.g. on Twitter).

I have a lot of problems trying to parse www.sitename.com/index.php#someAnchor in the correct markup.

content = urlifyLinks(content); content = urlifyHashtags(content); 

where the two functions are as follows:

 function urlifyHashtags(text) { var hashtagRegex = /^#([a-zA-Z0-9]+)/g; var tempText = text.replace(hashtagRegex, '<a href="index.php?keywords=$1">#$1</a>'); var hashtagRegex2 = /([^&])#([a-zA-Z0-9]+)/g; tempText = tempText.replace(hashtagRegex2, '$1<a href="index.php?keywords=$2">#$2</a>'); return tempText; } function urlifyLinks(inputText) { var replaceText, replacePattern1, replacePattern2, replacePattern3; replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim; replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>'); replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim; replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>'); replacePattern3 = /(\ w+@ [a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim; replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>'); return replacedText; } 

I am considering parsing urlifyLinks output and applying regex to all dom elements that are text elements on the first level, is this an ugly task?

Answer 1

You can avoid this problem by using a single regular expression with a callback function replacement.

For instance:

 function linkify(str){ // order matters var re = [ "\\b((?:https?|ftp)://[^\\s\"'<>]+)\\b", "\\b(www\\.[^\\s\"'<>]+)\\b", "\\b(\\w[\\w.+-]*@[\\w.-]+\\.[az]{2,6})\\b", "#([a-z0-9]+)"]; re = new RegExp(re.join('|'), "gi"); return str.replace(re, function(match, url, www, mail, twitler){ if(url) return "<a href=\"" + url + "\">" + url + "</a>"; if(www) return "<a href=\"http://" + www + "\">" + www + "</a>"; if(mail) return "<a href=\"mailto:" + mail + "\">" + mail + "</a>"; if(twitler) return "<a href=\"foo?bar=" + twitler + "\">#" + twitler + "</a>"; // shouldnt get here, but just in case return match; }); }