jQuery 正则表达式匹配未附加到 div 类

Question

我有一个带有链接的 ul 类，如果正则表达式匹配，我正在尝试附加到特定的 div 类，但由于某种原因，我的正则表达式匹配得很好，但它没有将它附加到 div 类。我的目标是移动与正则表达式匹配的 ul 类并将其附加到 test3 类。这是我的 html 代码和我的 jquery

HTML 代码

<ul class="links">
<li>
<a class="links active" href="#test">Link </a>
</li>
</ul>

<ul class="links">
<li>
<a class="links active" href="#test">Link </a>
</li>
</ul>

<ul class="links">
<li>
<a class="links active" href="#test">Link </a>
</li>
</ul>

<ul class="links">
<li>
<a class="links active" href="#test">Link </a>
</li>
</ul>

<div class="test3"></div>

jQuery 代码

$(document).ready(function(){
     var test = test.match(/(<ul class="links">[\s\S]*?<a class.*?\[ABC\d\d\d\d\d\]<\/a>\s*<\/li>\s*<\/ul>)/g);
     return test.appendTo('.test3');
});

在正则表达式匹配后，它看起来像：

<div class="test3">
<ul class="links">
<li>
<a class="links active" href="#test"></a>
<li>
</ul>

<ul class="links">
<li>
<a class="links active" href="#test"></a>
<li>
</ul>
</div>

Answer 1

你的逻辑有几个问题。

• 使用 Regex 解析 HTML 是非常糟糕的做法。请改用 DOM 解析器，并在那里处理元素。由于您已经在页面中包含了 jQuery，因此您可以使用它。
• 您需要遍历每个 ul 元素以确定其中包含的 a 是否与正则表达式匹配并移动它，而不是克隆 HTML 内容。
• match() 返回一个字符串数组，而不是您可以调用 append() 的 jQuery 对象。
• test 未定义。
• 您需要针对每个ul 中a 的文本内容运行正则表达式，而不是针对整个ul。
• Regex 的 test() 方法更适合您的目的。
• 在正则表达式中使用\d{N} 而不是重复\d

说了这么多，试试下面的例子。请注意，我使 Regex 不区分大小写。如果它不适合您的需要，您可以轻松修改它。

jQuery($ => {
  let $ul = $('ul.links').each((i, el) => {
    let $el = $(el);
    if (/\[ABC\d{5}\]$/.test($el.find('a').text().trim(), 'i')) {
      $el.appendTo('.test3');
    }
  });
});

.test3 {
  border: 2px solid #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
  <li><a class="links active" href="#test">Link [DEF56789]</a></li>
</ul>
<ul class="links">
  <li><a class="links active" href="#test">Link [ABC12345]</a></li>
</ul>
<ul class="links">
  <li><a class="links active" href="#test">Link [DEF12345]</a></li>
</ul>
<ul class="links">
  <li><a class="links active" href="#test">Link [ABC56789]</a></li>
</ul>
<div class="test3"></div>