Question

我正在尝试在HTML代码内部的图案的最后一次出现内获取数字，但没有成功。模式为data\\[\d{1,3}\\]。在下面的示例中，如何获取数字03？

<body>
<h2>JavaScript Regular Expressions</h2>
<p>TEST</p>
<p>data[01]</p>
<button onclick="myFunction()">Try it</button>
<p>data[02]</p>
<p>TEST</p>
<p id="demo" test=data[03]></p>
</body>

我尝试使用$进行多种组合，但无法使其正常工作。

Answer 1

您可以使用negative lookahead assertion。

/data\[(\d{1,3})\](?![\s\S]*data\[\d{1,3}\])/

data\[(\d{1,3})\]用于匹配您的模式，(...)用于捕获数字值。
(?![\s\S]*data\[\d{1,3}\])是负的超前断言，在当前情况下，这有助于匹配任何data-{digit}格式的字符串，此字符串之后都不会遵循相同的格式。由于[\s\S]不包含换行符，因此.用于匹配任何内容。

const data = `data<body>
<h2>JavaScript Regular Expressions</h2>
<p>TEST</p>
<p>data[01]</p>
<button onclick="myFunction()">Try it</button>
<p>data[02]</p>
<p>TEST</p>
<p id="demo" test=data[03]></p>
</body>`

console.log(data.match(/data\[(\d{1,3})\](?![\s\S]*data\[\d{1,3}\])/)[1])

Detailed Regex explanation and demo here。

更新：如果它始终是test标签的p属性值，则可以使用DOMParser或虚拟DOM元素来完成此操作，因为RegExp不是解析HTML的好方法。

REF：Using regular expressions to parse HTML: why not?

使用DOMParser：

const data = `data<body>
    <h2>JavaScript Regular Expressions</h2>
    <p>TEST</p>
    <p>data[01]</p>
    <button onclick="myFunction()">Try it</button>
    <p>data[02]</p>
    <p>TEST</p>
    <p id="demo" test=data[03]></p>
    </body>`

var parser = new DOMParser();
var doc = parser.parseFromString(data, "text/html");

console.log(doc.querySelector('p#demo').getAttribute('test').match(/\d+/)[0])

创建虚拟元素

const data = `data<body>
    <h2>JavaScript Regular Expressions</h2>
    <p>TEST</p>
    <p>data[01]</p>
    <button onclick="myFunction()">Try it</button>
    <p>data[02]</p>
    <p>TEST</p>
    <p id="demo" test=data[03]></p>
    </body>`

// create a dummy element and set content
var div = document.createElement('div');
div.innerHTML = data;

console.log(div.querySelector('p#demo').getAttribute('test').match(/\d+/)[0])

Answer 2

JS .match()返回一个数组，因此只需从中获取最后一个数组项：arr[arr.length - 1]

var htmlString = document.body.innerHTML;
var match = htmlString.match(/data\[\d{1,3}\]/g);
console.log("ALL MATCHES", match);
if (match) {
  console.log("LAST MATCH", match[match.length - 1]);
}

<body>
  <h2>JavaScript Regular Expressions</h2>
  <p>TEST</p>
  <p>data[01]</p>
  <button onclick="myFunction()">Try it</button>
  <p>data[02]</p>
  <p>TEST</p>
  <p id="demo" test=data[03]></p>
</body>

返回上一次出现的模式编号

2 个答案: