CODEWITHSUNDEEP
javascriptregex
user10867452
user10867452

Reputation: 21

Take out image tag off the string and put it in an array

Need to deal with a very strange string response. I need to take out all the image tag from that string and put them in an array so I can iterate through the array so I can render the images

The sample string

var str = '<p>↵   This is the cap you unscrew to open when you refuel your car↵</p>↵↵<p>↵ New line↵</p>↵↵<p>↵ <img alt="blah" src="https://www.imgone.com/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />↵</p>Random Text <img alt="blah" src="https://www.imgtwo.com/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />'

The expected result can be

['<img alt="blah" src="https://www.imgone.com/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />', '<img alt="blah" src="https://www.imgtwo.com/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />']

Upvotes: 0

Views: 84

Answers (3)

Miroslav Glamuzina
Miroslav Glamuzina

Reputation: 4557

You can use to document.createElement() to act as a container to hold all the HTML in the str. After setting the innerHTML with the str value, you can iterate through the children of the element you just have created, filtering out any <image/>'s.

Updated to recursively get elements

let str = '<p>This is the cap you unscrew to open when you refuel your car</p><p>New line↵</p><p> <img alt="blah" src="https://www.imgone.com/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" /></p>Random Text <img alt="blah2" src="https://www.imgtwo.com/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg"/>';

// Create a container for the HTML above
let el = document.createElement('div');
// Put string in innerHTML of container 
el.innerHTML = str;

// Function to recursively filter out any images (as document Nodes) 
getTags = (el, tagName) => Array.from(el.children).reduce((acc, node) => {
  if (node.children.length) {
    acc = [...acc, ...getTags(node, tagName)];
  } else if (node.tagName === tagName.toUpperCase()) {
    acc.push(node);
  }
  return acc;
}, []);

// Result
console.log(getTags(el, 'img'));

Please do not use regex for parsing HTML, please see this post.

Upvotes: 0

user557597
user557597

Reputation:

This is the JS regex for the img tag

<img\s+(?:"[\S\s]*?"|'[\S\s]*?'|[^>]*?)+>

JS demo 

var str = '<p>↵   This is the cap you unscrew to open when you refuel your car↵</p>↵↵<p>↵ New line↵</p>↵↵<p>↵ <img alt="blah" src="https://www.imgone.com/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />↵</p>Random Text <img alt="blah" src="https://www.imgtwo.com/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />'

var result = str.match( /<img\s+(?:"[\S\s]*?"|'[\S\s]*?'|[^>]*?)+>/g );
console.log(result)

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18975

You can use /<img .*?>/g and exec to check match like this

var str = '<p>↵   This is the cap you unscrew to open when you refuel your car↵</p>↵↵<p>↵ New line↵</p>↵↵<p>↵ <img alt="blah" src="https://www.imgone.com/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />↵</p>Random Text <img alt="blah" src="https://www.imgtwo.com/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />'

var m;
var result = []
do {
    m = re.exec(str);
    if (m) {
        result.push(m[0]);
    }
} while (m);
//var tmp = str.replace(/<img .*?>/g,"");
console.log(result)


var re = /<img .*?>/g;
var str = '<p>↵   This is the cap you unscrew to open when you refuel your car↵</p>↵↵<p>↵ New line↵</p>↵↵<p>↵ <img alt="blah" src="https://www.imgone.com/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />↵</p>Random Text <img alt="blah" src="https://www.imgtwo.com/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />'

var m;
var result = []
do {
    m = re.exec(str);
    if (m) {
        result.push(m[0]);
    }
} while (m);
//var tmp = str.replace(/<img .*?>/g,"");
console.log(result)

Upvotes: 0

Related Questions