Question

我有一个匹配iframe网址的正则表达式，并捕获各种组件。正则表达式如下所示

/(<iframe.*?src=['|"])((?:https?:\/\/|\/\/)[^\/]*)(?:.*?)(['|"][^>]*some-token:)([a-zA-Z0-9]+)(.*?>)/igm

要明确我的实际要求是转换为html字符串，例如字符串

<iframe src="http://somehost.com/somepath1/path2" class="some-token:abc123">

到

<iframe src="http://somehost.com/newpath?token=abc123" class="some-token:abc123">

正则表达式应该是正常的，但对于正常长度的html，它需要大约2秒才能执行，我认为非常高。

如果有人能指出我如何优化这个正则表达式，我真的很感激，我确信我做的事情非常糟糕，因为在我使用这个正则表达式之前

/(<iframe.*?src=['|"])(?:.*?)(['|"][^>]*some-token:)([a-zA-Z0-9]+)(.*?>)/igm

要完全替换源网址，只需添加参数，它只需要100毫秒

Answer 1

您不需要（也不应该）将iframe元素解析为字符串;你只需要访问它的属性，并从中检索信息并重写它们。

function fix_iframe_src(iframe) {
    var src = iframe.getAttribute('src');
    var klass = iframe.getAttribute('class');

    var token = get_token(klass);
    src = fix_src(src, token);
    iframe.setAttribute('src', src);
}

写作get_token和fix_src留作练习。

如果你想找到一堆iframe并修复它们，那么

var iframes = document.querySelectorAll('iframe');
for (var i = 0; i < iframes.length; i++) {
  fix_iframe_src(iframes[i]);
}

顺便说一下，class属性的值似乎被打破了。我怀疑它是否符合任何CSS规则，如果这是意图。您是否将其用于提供令牌以外的其他内容？在这种情况下，最好使用data-token等数据属性。

关于regexp标志的一点：g和m标志对你没有任何作用。 m是关于将^和$等锚点匹配到源字符串中行的开头和结尾，这对您来说不是问题。 g是多次匹配，这也不是问题。

你的正则表达式花了这么长时间的原因很可能就是你把整个DOM扔掉了。除非你向我们展示你所称的代码，否则很难说。

优化正则表达式以匹配网址中的域名

1 个答案: