regex中的高级查找

Question

嗨，我有这个html:

<div class="c-disruption-item c-disruption-item--line"> 
<h3 class="c-disruption-item__title" id="11e62827-9f9c-48b2-8807-09f6b6ebeec6" name="11e62827-9f9c-48b2-8807-09f6b6ebeec6"> <a>Closure of London Road</a> </h3> 
<ul class="c-disruption__affected-entities"> 
<li>Affected routes:</li> 
<li> <a href="/services/RB/X4#disruptions" class="line-block" style="background-color: #A38142; color:#FFFFFF"> 
<div class="line-block__contents">
X4 
</div> </a> </li> 
</ul>
<p>The left turn from Wiltshire Road on to London Road will be closed between 10.00pm and 5.00am on the nights of 27/28 and 28/29 April 2020.<br> <br> Lion X4 affected as follows:-<br> <br> Journeys towards Bracknell will be diverted and unable to serve the Seaford Road bus stop. Please use the Three Frogs bus stop instead.<br> <br> Journeys towards Reading are not affected and should follow normal route.<br> <br> We are sorry for the inconvenience caused.</p> 
</div>

我想选择<ul></ul>部分前后的内容，意思是而不是这个：

<ul class="c-disruption__affected-entities"> 
<li>Affected routes:</li> 
<li> <a href="/services/RB/X4#disruptions" class="line-block" style="background-color: #A38142; color:#FFFFFF"> 
<div class="line-block__contents">
X4 
</div> </a> </li> 
</ul>

但是如果这个部分不存在，我想全部选择

我尝试了这个选择([Ww]+(?=<ul)|(?<=ul>)[Ww]+)，但如果<ul><ul>不存在，它就不起作用。选择必须是单独的regax。有人有主意吗？

感谢

Answer 1

Regex是最后的手段(至少在使用JavaScript时(。您的目标是通过遍历DOM而不是扫描试图匹配容易出错的模式的巨大字符串来实现的。

找到一个u有序l与".c-disruption__affected-entities"的className有关，然后排除所述<ul>。

Regex

字符串是regex能够处理的唯一数据类型。因此，所有的HTML(不仅仅是字符串(都需要转换成字符串。

let htmlString = document.body.innerHTML;

有效的HTML可能使用双引号和单引号，可能出现多个空格，多个空行等。必须编写正则表达式才能处理此类不一致，或者编写正则表达式以针对特定的模式，使其在特定情况之外的有用性使其毫无价值。htmlString很可能是一堆厚厚的HTML，具有巨大的属性值，如："c-disruption-item c-disruption-item--line"。无论如何，这里有一条使用正则表达式方法.replace()的语句。它未经测试，因为它既不高效，也不实用，完全浪费时间：

let result = htmlString.replace(/<uls[sS]*c-disruption__affected-entities[sS]*ul>/i, '');   

---

DOM

像这样的值：ul.c-disruption__affected-entities作为HTML更有意义，并且可以通过多种标准方式作为DOM对象访问。以下演示的功能可以轻松满足OP的目标。

Demo

注意：演示中对详细信息进行了评论。

/**
* Create a documentFragment and move the excluded node
* (or nodes if it has descendants) to it. Although the
* excluded node is no longer part of the DOM, a 
* documentFragment allows any of its descendant nodes to
* reattach to the DOM however and whenever.
***
* @param {String} selector -- A CSS selector string of a
*                             tag that needs to be 
*                             returned without the
*                             excluded tag.
*        {String} exclusion - A CSS selector string of the
*                             tag that needs to be
*                             removed from the returned                           
*                             value.
*/
const excludeNode = (selector, exclusion) => {
const frag = document.createDocumentFragment();
const area = document.querySelector(selector);
const excl = area.querySelector(exclusion);
frag.appendChild(excl);
return area.outerHTML;
};
console.log(excludeNode(".c-disruption-item.c-disruption-item--line", ".c-disruption__affected-entities"));

:root {
overflow-y: scroll;
height: 200vh
}

<div class="c-disruption-item c-disruption-item--line">
<h3 class="c-disruption-item__title" id="11e62827-9f9c-48b2-8807-09f6b6ebeec6" name="11e62827-9f9c-48b2-8807-09f6b6ebeec6"> <a>Closure of London Road</a> </h3>
<ul class="c-disruption__affected-entities">
<li>Affected routes:</li>
<li>
<a href="/services/RB/X4#disruptions" class="line-block" style="background-color: #A38142; color:#FFFFFF">
<div class="line-block__contents">
X4
</div>
</a>
</li>
</ul>
<p>The left turn from Wiltshire Road on to London Road will be closed between 10.00pm and 5.00am on the nights of 27/28 and 28/29 April 2020.<br> <br> Lion X4 affected as follows:-<br> <br> Journeys towards Bracknell will be diverted and unable to serve
the Seaford Road bus stop. Please use the Three Frogs bus stop instead.<br> <br> Journeys towards Reading are not affected and should follow normal route.<br> <br> We are sorry for the inconvenience caused.</p>
</div>