Solution 1 :

With DOMParser, you can create a document from the string and use querySelectorAll to select and count them:

const str = '<p>Here is some text with an image</p><br><img src="data:base64;{ a base64 string }"/>';
const doc = new DOMParser().parseFromString(str, 'text/html');
const imgs = doc.querySelectorAll('img');

Solution 2 :

I’d say the fastest and simplest way is to consider that any html element <img> must always start with <img. You can then just search the number of occurrences. This also supports malformed html such as <iMg

var msg = `<p>Here is some text with an image</p><br>
           <img src="data:base64;{ a base64 string }"/>
           <iMg src="" />`

const n = msg.match(/<img/gim).length

console.log(n) // 2

Solution 3 :

CertainPerformance’s answer works, however, you can also use javascript’s built-in match function (because it looks like you are looking for a regex-type solution):

var str = '<p>Here is some text with an image</p><br><img src="data:base64;{ a base64 string }"/>';
numMatches = str.match(/<img/igm);
if (numMatches != null) {
  numMatches = numMatches.length;
} else {
  numMatches = 0;
//The string "<img" is needed because a text can have the string "img", but angle brackets are specially reserved for HTML tags. Also, this prevents the matching of </img>, in case there is a closing tag (though there typically isn't)

Problem :

I have a string of HTML produced by a WYSIWYG editor. I am using Angular for my project.

Let’s say I have some stringified HTML like this:

'<p>Here is some text with an image</p><br><img src="data:base64;{ a base64 string }"/>'

How can I parse this string on the browser-side and count all the <img> elements?

Do I need to use regex or is there an NPM package that I can use on the browser-side that will do this for me?

Note: I don’t want to render this HTML in the browser. I just want to count the image tags for validation purposes.


Comment posted by Endothermic_Dragon

Try using a regex to make it more resistant to malformed HTML. Also, nice solution – I tried to use

Comment posted by João Pimentel Ferreira

@Endothermic_Dragon thank you, I edited your suggestion accordingly for any number of white spaces between

Comment posted by Endothermic_Dragon

White spaces won’t render an image (try it out if you want), but rather changing the capitalization (such as

Comment posted by John

This is a quick solution, but prone to error.

Comment posted by Endothermic_Dragon

How so? I don’t see anywhere it can go wrong. Do you? If so, please let me know so I can update the regex expression. Also, note that you can’t put a space between the angle bracket and the “img” tag name, because if you did then it wouldn’t render an image.

Comment posted by John

Your answer is case sensitive, doesn’t work with broken or malformed html, and throws an error if there are no matches.

Comment posted by Endothermic_Dragon

Fixed it! Any other issues?