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');
console.log(imgs.length);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) // 2CertainPerformance’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)
console.log(numMatches);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.
Try using a regex to make it more resistant to malformed HTML. Also, nice solution – I tried to use
@Endothermic_Dragon thank you, I edited your suggestion accordingly for any number of white spaces between
White spaces won’t render an image (try it out if you want), but rather changing the capitalization (such as
This is a quick solution, but prone to error.
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.
Your answer is case sensitive, doesn’t work with broken or malformed html, and throws an error if there are no matches.
Fixed it! Any other issues?