JS Get multiple links in a string
Ad
I'm trying to turn strings with multiple links formatted like this:
random text and a link: [Google](http://google.com),
also check out this link: [Facebook](http://facebook.com)
which can all be found here: http://example.com
into this:
random text and a link: <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://google.com">Google</a>,
also check out this link: <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://facebook.com">Facebook</a>
which can all be found here: <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://example.com">http://example.com</a>
Right now I have a function that can only find the first link
function findURL(comment) {
//Find text in round brackets
var roundBrackets = /\(([^)]+)\)/
var matches = roundBrackets.exec(comment)
if(matches != null && matches[1] != undefined && ~matches[1].indexOf("http")){
//If found link in round brackets, see if it's accompanied by text in square brackets
var squareBrackets = /\[([^)]+)\]/
var text = squareBrackets.exec(comment)
var linkText = matches[1] //Will be overwritten if there is text in square brackets
if(text != null){
linkText = text[1]
comment = comment.replace(text[0], '')
}
var link = '<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="'+matches[1]+'">'+linkText+'</a>'
comment = comment.replace(matches[0], link)
}
//Find regular links
else if(comment && ~comment.indexOf("http")){
var urlRegex = /(https?:\/\/[^\s]+)/g
var url = urlRegex.exec(comment)
var newLink = '<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="'+url[1]+'">'+url[1]+'</a>'
comment = comment.replace(url[1], newLink)
}
return comment
}
I feel like this is probably not the best method to find links, if there is a more efficient way I don't mind changing the entire thing altogether.
Ad
Answer
Ad
Another idea, but not very stronger and less efficient than yours.
var r = "random text and a link: [Google](http://google.com),
also check out this link: [Facebook](http://facebook.com)
which can all be found here: http://example.com";
var o = r.match(new RegExp(/(\[[\w\-\.]+\]+)(\(?http:[\/\w\-\.]+\))|(http:[\/\w\-\.]+)/g));
var v = r;
for(i in o)
{
if(o[i].indexOf("]") >= 0)
{
var p = o[i].replace(/[\[\]\(\)]/g, ' ').trim().split(' ');
v = v.replace(o[i], "<a href='"+p.pop()+"'>"+p.shift()+"</a>");
}else
{
v = v.replace(o[i], "<a href='"+o[i]+"'>"+o[i]+"</a>");
}
}
output
"random text and a link: <a href='http://google.com'>Google</a>,
also check out this link: <a href='http://facebook.com'>Facebook</a>
which can all be found here: <a href='http://example.com'>http://example.com</a>"
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad