Извлекайте URL и CDATA из строки XML с помощью регулярного выражения

Question

Описание

Я пытаюсь извлечь URL-адреса и / или CDATA из XML.Текущее решение, которое у меня есть, работает хорошо, но возвращает только первый элемент.Как мне вернуть несколько элементов с этим специфическим регулярным выражением?

XML имеет вид:

<MediaFile>
https://some_url.com/file.mp4
</MediaFile>
<MediaFile>
https://some_url2.com/file.mp4
</MediaFile>

и

<MediaFile>
<!CDATA some data here with spaces sometimes>
</MediaFile>
...etc

Что я пытаюсь сделатьдостижения

В моем примере есть 3 тега медиафайла, и я пытаюсь извлечь 3 различных URL-адреса и CDATA.Окончательное решение должно выглядеть примерно так:

1st url https://example1.com/file.mp4
2nd url https://example2.com/file.mp4
3rd url <!CDATA some data example>

Что я пробовал:

ссылка на regex101

const data = `<MediaFile delivery="progressive" width="640" height="360" type="video/mp4" bitrate="397" scalable="false" maintainAspectRatio="false">https://example1.com/file.mp4</MediaFile><MediaFile delivery="progressive" width="1024" height="576" type="video/mp4" bitrate="1280" scalable="false" maintainAspectRatio="false">https://example2.com/file.mp4</MediaFile><MediaFile delivery="progressive" width="1024" height="576" type="video/mp4" bitrate="1280" scalable="false" maintainAspectRatio="false"><!CDATA some data example></MediaFile>`;

const regex = /<MediaFile[^>]*type="video\/mp4"[^>]*>([\s\S]*?)<\/MediaFile>/gm;

const res = regex.exec(data);

console.log('1st url', res[1]);
console.log('2nd url', res[2]);
console.log('3rd url', res[3]);

Answer 1

Вероятно, лучше не использовать регулярные выражения, а метод document.querySelectorAll() для его анализа вместо:

const data = `<MediaFile delivery="progressive" width="640" height="360" type="video/mp4" bitrate="397" scalable="false" maintainAspectRatio="false">https://example1.com/file.mp4</MediaFile><MediaFile delivery="progressive" width="1024" height="576" type="video/mp4" bitrate="1280" scalable="false" maintainAspectRatio="false">https://example2.com/file.mp4</MediaFile><MediaFile delivery="progressive" width="1024" height="576" type="video/mp4" bitrate="1280" scalable="false" maintainAspectRatio="false"><!CDATA some data example></MediaFile>`;

var o=document.createElement('div');o.innerHTML=data.replace(/<!CDATA/g,'!CDATA');
var arr=Array.from(o.querySelectorAll('MediaFile'))
             .map(el=>el.innerHTML.replace('!CDATA','<!CDATA')
                                  .replace('&gt;','>'))

console.log(arr.join('\n'));

С небольшим "дополнительным усилием" вы можете замаскировать секции <!CDATA ... > с помощью replace() перед созданием элемента DOM и позже заменить it«назад» в его предполагаемую форму путем применения .replace('!CDATA','<!CDATA').replace('&gt;','>' к .innerHTML -строкам элементов MediaFile.

Answer 2

Вы можете попытаться разобрать его.

   const data = `<MediaFile delivery="progressive" width="640" height="360" type="video/mp4" bitrate="397" scalable="false" maintainAspectRatio="false">https://example1.com/file.mp4</MediaFile><MediaFile delivery="progressive" width="1024" height="576" type="video/mp4" bitrate="1280" scalable="false" maintainAspectRatio="false">https://example2.com/file.mp4</MediaFile><MediaFile delivery="progressive" width="1024" height="576" type="video/mp4" bitrate="1280" scalable="false" maintainAspectRatio="false"><!CDATA some data example></MediaFile>`;
    
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(data,"text/html");
    
    console.log(xmlDoc.getElementsByTagName("MediaFile")[0].innerHTML);
    console.log(xmlDoc.getElementsByTagName("MediaFile")[1].innerHTML);
    console.log(xmlDoc.getElementsByTagName("MediaFile")[2].innerHTML);