JS/JQUERY: How to match and replace occurances inside specified strings?

Question

I swear i tried figuring this out myself all day, but my regex-foo is just not that good.

I'm trying to create a small parser function to convert strings with urls to html coded and tags

I know how complex a regex can be trying to figure out which urls to covert to what from a big string, so what I did is simply prefix the string to covert with a flag to tell the parser how to format it, and post fix it with the ";" char to tell the parser where that particular URL ends. This way the parser has lesser guest work to do resulting in easier to regex-match and faster for execution. I really dont need a generalize match and replace all.

So my formatting is as follows, where "X" is the url string:

1. For URLs it will be url=X;
2. For IMAGES it will be img=X;

so anything in between my prefix and post fix must be converted accordingly..

So for example, for images in my document, the string could be:

click this image img=http://example.com/image1.jpg;

and i need that converted to

click this image <a href="http://example.com/image1.jpg" target="_blank">
<img class="img img-responsive" src="http://example.com/image1.jpg"/></a>

I am able to do this easily in PHP buy preg_match() function

preg_match('/\img=(.+?)\;/i', $item_des, $matches)

here's the code block:

I decided to push this routine to the browser instead of the backend (PHP) so i need similar or better JS solution.

Hoping anyone can help here, thanks!

Answer 1

try code below:

var str = "click this image img=http://example.com/image1.jpg;image2 img=http://example.com/image2.jpg;"
var phrases = str.split(';');
var totalRes = '';
phrases.forEach(function(str){
  totalRes += processPhrase(str);
});
console.log(totalRes);
function processPhrase(str) {
  var img = str.split('img=')
  var res = '';
  if (img.length > 1) { //img=X
    var url = img[1].replace(';', '');
    res = img[0] + "<a href='" + url + "' target='_blank'><img src='" + url + "'/></a>";
  } else {
    var url = str.split('url=');
    //Do for url=X here
  }
  console.info(res);
  return res;
}

Answer 2

You can use this regexp /(img|url)=(.+?);/g:

(img|url) : the type, should be grouped so we will know what to do with the value
=         : literal "="
(.+?)     : a number of characters (use the non-greedy ? so it will match as fewer as possible)
;         : literal ";"

Read more about non-greedy regexps here.

---

Example:

var str = "click this image img=http://i.imgur.com/3wY30O4.jpg?a=123&b=456; and check this URL url=http://google.com/;. Bye!";


// executer is an object that has functions that apply the changes for each type (you can modify the functions for your need)
var executer = {
  "url": function(e) {
    return '<a target="_blank" href="' + e + '">' + e + '</a>';
  },
  "img": function(e) {
    return '<a target="_blank" href="' + e + '"><img src="' + e + '"/></a>';
  }
}

var res = str.replace(/(img|url)=(.+?);/g, function(m, type, value) {
  return executer[type](value);    // executer[type] will be either executer.url or executer.img, then we pass the value to that function and return its returned value
});

console.log(res);