为什么jquery不返回DOM的最后一个条目？

Question

我的预期目标：

我正在尝试选择以下正则表达式所涵盖的DOM元素的最后一个节点：

/(\[{3})[A-Z]+(\]{3})(\[{3})([0-9]{1,3})(\.*)([0-9]*)(\]{3})/g;

此正则表达式将涵盖[[[WIDTHCHANGE]]][[[250]]]或[[[HEIGHTCHANGE]]][[[250]]]等字符串。所以字符串有3次[和]，中间有文字，另外3次[和]以及介于两者之间的数字。

我的结构：

我有一个Div元素，其中包含许多span-elements，最后一个span元素包含此[[[WIDTHCHANGE]]][[[250]]]。

我目前的状态：

现在我想只选择包含上述正则表达式所涵盖文本的span元素。但是JQuery选择特定元素的父级的父级。

以下是我的JS-Search-Code：

var regex = /(\[{3})[A-Z]+(\]{3})(\[{3})([0-9]{1,3})(\.*)([0-9]*)(\]{3})/g;
var  ElementsToChange_ = $("span").filter(function () {
    return regex.test($(this).text()); 
}).last();

我有什么遗漏或误解吗？

编辑1：

这是一个Fiddle链接！

Answer 1

当您选择跨度时，您将获得所有跨度。因为span中有匹配的文本，所以它恰好与另一个包含文本的span嵌套。

现在解决方案取决于跨度中的内容，但在您的原因中，您可能只选择没有跨距的跨距。

$("span:not(:has(span))").filter(...)

如果它可以包含其他元素，例如<span>xxxx<span>foo</span></span>，那么它会有点棘手。您需要删除子节点，然后阅读文本。

Answer 2

问题与正则表达式有关。周围使用/定义的正则表达式在重用时会显示两个相同内容的意外行为。

可能有两种可能的解决方法

1. 使用内联正则表达式Fiddle

   var ElementsToChange_ = $("span").filter(function () {
       return /(\[{3})[A-Z]+(\]{3})(\[{3})([0-9]{1,3})(\.*)([0-9]*)(\]{3})/g.test($(this).text());
   }).last();
   console.log(ElementsToChange_);
   

2. 通过调用构造函数RegExp Fiddle

   创建正则表达式

   var regex = RegExp("(\\[{3})[A-Z]+(\\]{3})(\\[{3})([0-9]{1,3})(\\.*)([0-9]*)(\\]{3})");
   var ElementsToChange_ = $("span").filter(function () {
       return regex.test($(this).text()); 
   }).last();
   console.log(ElementsToChange_);