Выньте тег image из строки и поместите его в массив

Question

Нужно иметь дело с очень странным строковым ответом.Мне нужно извлечь все теги изображения из этой строки и поместить их в массив, чтобы я мог выполнять итерацию по массиву, чтобы я мог визуализировать изображения

Пример строки

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" />'

ожидаемый результат может быть

['<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" />']

Answer 1

Вы можете использовать /<img .*?>/g и exec для проверки соответствия следующим образом

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)

Answer 2

Вы можете использовать для document.createElement () , чтобы действовать как контейнер для хранения всего HTML в str.После установки innerHTML со значением str вы можете перебирать children элемента, который вы только что создали, отфильтровывая любые <image/>.

Обновлено для рекурсивного получения элементов

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'));

Пожалуйста, не используйте регулярные выражения для анализа HTML, см. этот пост .

Answer 3

Это регулярное выражение JS для тега img

<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)