[英]Javascript regex to replace <ul> or <ol> with only text within <li> tag
So let's say I have an ordered or unordered list that is in string form.因此,假设我有一个字符串形式的有序或无序列表。 I need only to return the text that is contained within each list item of the respective parent element:
我只需要返回包含在相应父元素的每个列表项中的文本:
<ul>
<li>Example One</li>
<li>Example Two</li>
</ul>
I have made this work, but obviously not very efficient:我已经完成了这项工作,但显然效率不高:
var first = string.replace(/.*<li>(.*)<\/li>.*/g, '$1');
var second = first.replace(/(<ul>|<ol>|<\/ol>|<\/ul>)/g, '');
Output is what I expect, but I know there is a regex format that will accomplish at once, but I am still pretty green in regards to regex so not sure what I am doing wrong. Output 是我所期望的,但我知道有一种正则表达式格式可以立即完成,但我在正则表达式方面仍然很绿色,所以不确定我做错了什么。 This is what I thought would work:
这是我认为可行的:
var newString = string.replace(/(<ul>|<ol>).*<li>(.*)<\/li>.*(<\/ul>|\/<ol>)/g, '$2');
However, this returns the entire HTML structure as a string:但是,这会将整个 HTML 结构作为字符串返回:
<ul>
<li>Example One</li>
<li>Example Two</li>
</ul>
As always my friends, thank you in advance.和往常一样,我的朋友们,提前谢谢你们。
You could split the regex in the pattern /((<ul>|<ol>)|<li>(.*)<\/li>|(<\/ul>|<\/ol>))/g
, example below you were pretty close.您可以将正则表达式拆分为
/((<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);
EDIT explanation:编辑说明:
The total pattern ((<ul>|<ol>)|<li>(.*)<\/li>|(<\/ul>|<\/ol>))
minus modifiers becomes the 1st capturing group (will hold anything that is passed up from subgroup).总模式
((<ul>|<ol>)|<li>(.*)<\/li>|(<\/ul>|<\/ol>))
减号修饰符成为第一个捕获组(将保存从子组传递的任何东西)。
We are giving 3 alternatives in 1st capturing group (<ul>|<ol>)
<li>(.*)<\/li>
<\/ul>|<\/ol>
我们在第一个捕获组
(<ul>|<ol>)
<li>(.*)<\/li>
<\/ul>|<\/ol>
中提供了 3 个备选方案
For alternative 1 it must match exactly <ul>
or <ol>
and it is also capturing group 2.对于备选方案 1,它必须完全匹配
<ul>
或<ol>
并且它也在捕获组 2。
For alternative 2 it must match <li>(.*)<\/li>
of <li>
ANYTHING </li>
, the .*
becomes capture group 3 because it is enclosed in parentheses ()
.对于备选方案 2,它必须匹配 <li
<li>
ANYTHING </li>
的<li>(.*)<\/li>
/li> , .*
成为捕获组 3,因为它包含在括号()
中。
For alternative 3 it must match exactly </ul>
or </ol>
and it is also capturing group 4.对于备选方案 3,它必须完全匹配
</ul>
或</ol>
并且它也在捕获组 4。
So run down:所以跑下来:
<ul>
matches groups (0: everything, 1: parent, and 2: the <ul>|<ol>
) aka [ <ul>
, <ul>
, <ul>
] <ul>
匹配组(0:一切,1:父,2: <ul>|<ol>
)又名 [ <ul>
, <ul>
, <ul>
]
<li>Example One</li>
matches groups (0: everything, 1: parent, 2: no match, and 3: <li>(.*)<\/li>
) aka [ <li>Example One</li>
, <li>Example One</li>
, null, Example One
] <li>Example One</li>
匹配组(0:所有,1:父,2:不匹配,3: <li>(.*)<\/li>
)又名 [ <li>Example One</li>
, <li>Example One</li>
,null, Example One
]
Homework on the last part:p最后一部分的作业:p
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.