How to replace img tag with attribute and specific class only

Question

I'm newbie in javascript and looking for some regex or way which can replace image tag with their attributes.

Image tag can be multiple without any unique id and I want to replace only those image tags which have particular class.

For example I've string like :

var str = 'hi <img dataattr1="att1" src="abc" class="img specificclass" dataattr2="att2" dataattr3="att3" /> <img dataattr1="newatt1" src="abc" class="img specificclass"  dataattr2="newatt2" dataattr3="newatt3" /> some more tag <img dataattr1="moreatt1" src="abc" class="img specificclass"  dataattr2="moreatt2" dataattr3="moreatt3" /> <img dataattr2="noreplace" src="abc" class="img" /> end';

so its output should be like this :

hi :::att2::: :::newatt2::: some more tag :::moreatt2::: <img data-attr1="noreplace" src="abc" class="img" /> end

What I tried till now is :

var str = 'hi <img dataattr1="att1" src="abc" class="img specificclass" dataattr2="att2" dataattr3="att3" /> <img dataattr1="newatt1" src="abc" class="img specificclass"  dataattr2="newatt2" dataattr3="newatt3" /> some more tag <img dataattr1="moreatt1" src="abc" class="img specificclass"  dataattr2="moreatt2" dataattr3="moreatt3" /> <img dataattr2="noreplace" src="abc" class="img" /> end';

var rgx = /<img[^>]*class="specificclass"[^>]*>/;

var regex = /<img.*?dataattr2='(.*?)'/;
var src = regex.exec(str)[1]
str = str.replace(rgx,src);

console.log(str);

but its giving an error and I'm not if its even right way to do it or not

By far, the best way to do this is to parse the HTML and use the resulting DOM fragment. [Attempts to parse HTML with regex are doomed to fail.](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags#1732454) — T.J. Crowder, Apr 26 '18 at 11:25

score 1 · Accepted Answer · answered Apr 26 '18 at 11:30

I wouldn't use regex for this, it's famously brittle and problematic for non-regular texts like HTML.

Instead, I'd use the DOM parser built into the browser (you've tagged jQuery, so I'm assuming you're doing this on a browser or in another environment with a DOM):

var str = 'hi <img dataattr1="att1" src="abc" class="img specificclass" dataattr2="att2" dataattr3="att3" /> <img dataattr1="newatt1" src="abc" class="img specificclass"  dataattr2="newatt2" dataattr3="newatt3" /> some more tag <img dataattr1="moreatt1" src="abc" class="img specificclass"  dataattr2="moreatt2" dataattr3="moreatt3" /> <img dataattr2="noreplace" src="abc" class="img" /> end';

// Parse it and wrap it in a div
var frag = $("<div>").append($.parseHTML(str));
// Find the relevant images
frag.find("img.specificclass[dataattr2]").each(function() {
  // Replace the image with a text node containing :::[dataattr2]:::
  var $this = $(this);
  $this.replaceWith(document.createTextNode(":::" + $this.attr("dataattr2") + ":::"));
});
// Get the HTML of the result
var str = frag.html();

console.log(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

How to replace img tag with attribute and specific class only

1 Answers1