Как перебрать такую строку и выбрать нужное содержимое?

Question

[I_Love_Emma_Watson]

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

Answer 1

[Александр Таратин]

https://jsfiddle.net/QW01_01/erjk8npz/

var cleanParser = new DOMParser();
function parse(text) {
    return Array.prototype.map.call(cleanParser.parseFromString(text, 'text/html').body.children, function(e){return e.innerHTML});
}

var codes = parse("<code>alert('hello');</code><code>console.log('test');</code>");

console.log(codes);

Comments

[I_Love_Emma_Watson]

А что если строка будет такой

var codes = parse("<code>alert('hello');</code>вот этот текст тоже должен быть, между двумя блоками кода<code>console.log('test');</code>");

? в этом и не понимание, как это вывести в таком порядке как на картинке, то есть я оберну содержимое code в нужный мне компонент, а всё остальное оберну например в p какой-нибудь

[ой всё]

I_Love_Emma_Watson, массив

Answer 2

[Роман Александрович]

https://jsfiddle.net/euer6nfv/
как вариант