Javascript регулярное выражение для замены <ul>или <ol>только текстом внутри тега <li>

Question

Допустим, у меня есть упорядоченный или неупорядоченный список в виде строки. Мне нужно только вернуть текст, который содержится в каждом элементе списка соответствующего родительского элемента:

<ul>
    <li>Example One</li>
    <li>Example Two</li>
</ul>

Я сделал эту работу, но, очевидно, не очень эффективно:

var first = string.replace(/.*<li>(.*)<\/li>.*/g, '$1');
var second = first.replace(/(<ul>|<ol>|<\/ol>|<\/ul>)/g, '');

Вывод - это то, что я ожидаю, но я знаю, что есть формат регулярных выражений, который сразу выполнит sh, но я все еще довольно зелен в отношении регулярных выражений, поэтому не уверен, что делаю неправильно. Вот что я думал, что будет работать:

var newString = string.replace(/(<ul>|<ol>).*<li>(.*)<\/li>.*(<\/ul>|\/<ol>)/g, '$2');

Однако, это возвращает всю структуру HTML в виде строки:

<ul>
    <li>Example One</li>
    <li>Example Two</li>
</ul>

Как всегда, друзья мои, заранее спасибо.

Answer 1

Вы можете разделить регулярное выражение в шаблоне /((<ul>|<ol>)|<li>(.*)<\/li>|(<\/ul>|<\/ol>))/g, например ниже вы были довольно близки.

const template = `<ul>
    <li>Example One</li>
    <li>Example Two</li>
  </ul>`

const str = template.replace(/((<ul>|<ol>)|<li>(.*)<\/li>|(<\/ul>|<\/ol>))/g, '$3');
console.log(str);

РЕДАКТИРОВАТЬ объяснение:

Общий шаблон ((<ul>|<ol>)|<li>(.*)<\/li>|(<\/ul>|<\/ol>)) без модификаторов становится 1-й группой захвата (будет содержать все, что передано из подгруппы).

Мы даем 3 варианта в 1-й группе захвата (<ul>|<ol>) <li>(.*)<\/li> <\/ul>|<\/ol>

Для варианта 1 он должен точно соответствовать <ul> или <ol>, и это также группа захвата 2 .

Для варианта 2 он должен совпадать с <li>(.*)<\/li> из <li> НИЧЕГО </li>, .* становится группой захвата 3, поскольку он заключен в скобки ().

Для в альтернативе 3 он должен точно соответствовать </ul> или </ol>, а также захватывать группу 4.

Итак, прогоните:

<ul> соответствует группам (0: все, 1: родительский и 2: <ul>|<ol>) aka [<ul>, <ul>, <ul>]

<li>Example One</li> соответствует группам (0: все, 1: родитель, 2: нет совпадения и 3 : <li>(.*)<\/li>) aka [<li>Example One</li>, <li>Example One</li>, null, Example One]

Домашнее задание по последней части: p