Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript Regexp loop all matches

I'm trying to do something similar with stack overflow's rich text editor. Given this text:

[Text Example][1]  [1][http://www.example.com] 

I want to loop each [string][int] that is found which I do this way:

var Text = "[Text Example][1]\n[1][http: //www.example.com]";  // Find resource links  var arrMatch = null;  var rePattern = new RegExp(    "\\[(.+?)\\]\\[([0-9]+)\\]",    "gi"  );  while (arrMatch = rePattern.exec(Text)) {    console.log("ok");  }

This works great, it alerts 'ok' for each [string][int]. What I need to do though, is for each match found, replace the initial match with components of the second match.

So in the loop $2 would represent the int part originally matched, and I would run this regexp (pseduo)

while (arrMatch = rePattern.exec(Text)) {     var FindIndex = $2; // This would be 1 in our example     new RegExp("\\[" + FindIndex + "\\]\\[(.+?)\\]", "g")      // Replace original match now with hyperlink } 

This would match

[1][http://www.example.com] 

End result for first example would be:

<a href="http://www.example.com" rel="nofollow">Text Example</a> 

Edit

I've gotten as far as this now:

var Text = "[Text Example][1]\n[1][http: //www.example.com]";  // Find resource links  reg = new RegExp(    "\\[(.+?)\\]\\[([0-9]+)\\]",    "gi");  var result;  while ((result = reg.exec(Text)) !== null) {    var LinkText = result[1];    var Match = result[0];    Text = Text.replace(new RegExp(Match, "g"), '<a href="#">" + LinkText + "</a>');  }  console.log(Text);
like image 338
Tom Gullen Avatar asked Apr 29 '11 17:04

Tom Gullen


People also ask

How do I return all matches in regex?

The method str. match(regexp) finds matches for regexp in the string str . If the regexp has flag g , then it returns an array of all matches as strings, without capturing groups and other details. If there are no matches, no matter if there's flag g or not, null is returned.

What is difference [] and () in regex?

[] denotes a character class. () denotes a capturing group. [a-z0-9] -- One character that is in the range of a-z OR 0-9. (a-z0-9) -- Explicit capture of a-z0-9 .

What is the regular expression function to match all occurrences of a string?

Regular expressions are used with the RegExp methods test() and exec() and with the String methods match() , replace() , search() , and split() . Executes a search for a match in a string. It returns an array of information or null on a mismatch.

What is matchAll in JavaScript?

matchAll() The matchAll() method returns an iterator of all results matching a string against a regular expression, including capturing groups.


2 Answers

I agree with Jason that it’d be faster/safer to use an existing Markdown library, but you’re looking for String.prototype.replace (also, use RegExp literals!):

var Text = "[Text Example][1]\n[1][http: //www.example.com]";  var rePattern = /\[(.+?)\]\[([0-9]+)\]/gi;    console.log(Text.replace(rePattern, function(match, text, urlId) {    // return an appropriately-formatted link    return `<a href="${urlId}">${text}</a>`;  }));
like image 148
s4y Avatar answered Sep 24 '22 11:09

s4y


I managed to do it in the end with this:

var Text = "[Text Example][1]\n[1][http: //www.example.com]";  // Find resource links  reg = new RegExp(    "\\[(.+?)\\]\\[([0-9]+)\\]",    "gi");  var result;  while (result = reg.exec(Text)) {    var LinkText = result[1];    var Match = result[0];    var LinkID = result[2];    var FoundURL = new RegExp("\\[" + LinkID + "\\]\\[(.+?)\\]", "g").exec(Text);    Text = Text.replace(Match, '<a href="' + FoundURL[1] + '" rel="nofollow">' + LinkText + '</a>');  }  console.log(Text);
like image 24
Tom Gullen Avatar answered Sep 20 '22 11:09

Tom Gullen