Question

我有这个正则表达式/<h([2-4])>(.+)<\/h[2-4]>/g 它匹配所有h2，h3，h4并捕获级别和标题文本。

它是否足够好，或者你在速度和稳健性方面看到了改进的空间？

Answer 1

请勿在HTML上使用正则表达式。您可以使用Element.querySelectorAll。将Element替换为您要从中选择标题的DOM元素的引用。

var heading = document.querySelectorAll("h2, h3, h4");

QuerySelectorAll（和他的兄弟querySelector）使用CSS选择器从DOM中选择元素。您可以使用逗号提供多个选择器。这将选择所有h2-4元素。您可以使用以下代码循环它们：

Array.prototype.map.call(heading , function(element){
    //do something with the element here.
    console.log(element.textContent); //EXAMPLE, display the text in the element.
});

由于querySelectorAll返回一个节点列表（这是一个数组对象），我们可以将它传递给Array.map（虽然不是直接）。我们使用Array.prototype.map.call将节点列表作为数组传递给map函数。 Map遍历节点列表中的每个元素。

Answer 2

让你的正则表达式做一个非贪婪的比赛。并且还使正则表达式进行反向引用。

/<(h[2-4])>([^<>]+)<\/\1>/g

或

/<(h[2-4])>((?:(?!<h\d+\b).)+?)<\/\1>/g

DEMO

匹配和捕获标题的正则表达式

2 个答案: