Javascript 正则表达式子组

Question

首先，不要链接到“Don't parse HTML with Regex”帖子:)

我有以下 HTML，用于显示各种货币、含税和不含税的价格:

<span id="price_break_12345" name="1">
    <span class="price">
        <span class="inc" >
            <span class="GBP">£25.00</span>
            <span class="USD" style="display:none;">$34.31</span>
            <span class="EUR" style="display:none;">27.92&nbsp;€</span>
        </span>
        <span class="ex"  style="display:none;">
            <span class="GBP">£20.83</span>
            <span class="USD" style="display:none;">$34.31</span>
            <span class="EUR" style="display:none;">23.27&nbsp;€</span>
        </span>
    </span>
    <span style="display:none" class="raw_price">25.000</span>
</span>

AJAX 调用返回单个 HTML 字符串，其中包含上述 HTML 的多个副本，价格各不相同。我试图与正则表达式匹配的是:

• 上述 HTML 的每个 block (如前所述，它在返回字符串中出现多次)
• 最外层span的name属性值

我目前的情况是这样的:

var price_regex = new RegExp(/(<span([\s\S]*?)><span([\s\S]*?)>([\s\S]*?)<\/span><\/span\>)/gm);
console && console.log(price_regex.exec(product_price));

它为每个出现的价格突破匹配一次价格突破(所以如果有 name=1、name=5 和 name=15 它匹配 name=1 3 次。

我哪里出错了？

Answer 1

因此，如果您可以像这样依赖每个 block 中第一个跨度的格式:

<span id="price_break_12345" name="1">

那么，您可以使用这样的代码循环遍历所有匹配项吗？此代码标识第一个跨度中的 price_break_xxxx id 值，然后挑选出以下名称属性:

var re = /id="price_break_\d+"\s+name="([^"]+)"/gm;
var match;
while (match = re.exec(str)) {
    console.log(match[1]);
}

你可以在这里看到它的工作:http://jsfiddle.net/jfriend00/G39ne/ .

我使用一个转换器将您的三个 HTML block 转换为一个 javascript 字符串(以模拟您从 ajax 调用中返回的内容)，以便我可以在其上运行代码。

---

一种更可靠的方法是只使用浏览器的 HTML 解析器为您完成所有工作。假设您在名为“str”的字符串变量中有 HTML，您可以像这样使用浏览器的解析器:

function getElementChildren(parent) {
    var elements = [];
    var children = parent.childNodes;
    for (var i = 0, len = children.length; i < len; i++) {
        // collect element nodes only
        if (children[i].nodeType == 1) {
            elements.push(children[i]);
        }
    }
    return(elements);
}

var div = document.createElement("div");
div.innerHTML = str;
var priceBlocks = getElementChildren(div);
for (i = 0; i < priceBlocks.length; i++) {
    console.log(priceBlocks[i].id + ", " + priceBlocks[i].getAttribute("name") + "<br>");
}

此处演示:http://jsfiddle.net/jfriend00/F6D8d/

这将为您提供这些元素的所有 DOM 遍历功能，而不是在 HTML 上使用(有点脆弱的)正则表达式。