javascript - 正则表达式中的高级查找

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>

但是! 如果此部分不存在，我想选择全部。

我尝试了这个选择([\W\w]+(?=\<ul)|(?<=ul>)[\W\w]+)但如果 <ul><\ul> 则不起作用不存在。 选择必须单独进行。 有人有想法吗？

谢谢

Answer 1

正则表达式是最后的手段(至少在使用 JavaScript 时)。您的目标是通过遍历 DOM 来完成，而不是扫描一个巨大的字符串来尝试匹配容易出错的模式。

使用className查找u无序l列表的".c-disruption__affected-entities"然后排除所说的 <ul> .

正则表达式

字符串是正则表达式唯一可以处理的数据类型。因此，所有 HTML(不仅仅是字符串)都需要转换为字符串。

let htmlString = document.body.innerHTML;

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

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

<小时/>

DOM

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

演示

注意:详细信息已在演示中注释。

/**
 * 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>