Javascript 正则表达式仅使用 标记内的文本替换 或

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

输出是我所期望的，但我知道有一种正则表达式格式可以立即完成，但我对正则表达式仍然很陌生，所以不确定我做错了什么。这就是我认为可行的方法:

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

但是，这会以字符串形式返回整个 HTML 结构:

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

一如既往，我的 friend 们，提前谢谢你们。

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>))减号修饰符成为第一个捕获组(将保存从子组向上传递的任何内容)。

我们在第一个捕获组中给出了 3 个替代方案 (<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> )又名 [ <ul> , <ul> , <ul> ]

<li>Example One</li>匹配组(0:所有内容，1:父级，2:不匹配，3: <li>(.*)<\/li> )又名 [ <li>Example One</li> , <li>Example One</li> ，空，Example One ]

最后一部分的作业:p