如何编写正则表达式以便模式可以按任何顺序出现？

Question

我有以下非常简单的兼容 Javascript 的正则表达式：

<script type="text/javascript" id="(.+)" src="([^"]+)">

我正在尝试匹配脚本标签并收集 ID 和 src 属性。我想让属性的顺序无关紧要，以便以下内容仍然匹配：

<script id="..." type="text/javascript" src="...">
<script src="..." id="..." type="text/javascript">
<script id="..." src="..." type="text/javascript">

是否可以允许属性以任意顺序出现而不影响其收集匹配 ID 和 src 的能力？

edit 要匹配的字符串来自innerHTML，使得DOM 遍历变得不可能。另外，我不能为这个特定的应用程序使用任何第三方库。

Answer 1

免责声明：注意正则表达式和 HTML 源代码。它很脆弱，因此很容易被破坏或规避，您甚至不应该考虑使用它来验证用户输入。

如果你对源数据是真诚的，并且知道它符合格式良好的 HTML 规则，你可以使用这个：

var html = "variable/property holding your html source";
var re_script = /<script\s.+?>/ig;
var re_id     = /id="(.*?)"/i;
var re_src    = /src="(.*?)"/i;

var scriptTag = null;
while (scriptTag = re_script.exec(html))
{
  var matchId  = re_id.exec(scriptTag);
  var matchSrc = re_src.exec(scriptTag);

  if (matchId && matchSrc)
  {
    var scriptId  = matchId[1];
    var scriptSrc = matchSrc[1];
    alert('Found script ID="' + scriptId + '", SRC="' + scriptSrc + '"');
  }
}

基本上，这就是 jQuery 的 $("script").each() 会做的事情，只是没有 jQuery 并且不需要 DOM。

Answer 2

这听起来像是一个讨厌的正则表达式。 IMO，您最好使用 xpath 来查询 DOM。或者，您也可以使用 jquery javascript 库来选择您需要的元素。

Answer 3

您也可以使用 jQuery 尝试以下操作：

$("script").each(function() {
    var src = $(this).attr("src");
    var id = $(this).attr("id");

    alert(id + ": " + src);
});

这将比我的脚本解析正则表达式更好。

Answer 4

如果需要获取文件的脚本标签， 你能不能只使用document.getElementsByTagName()，然后检查（可能使用正则表达式）你需要的属性是否存在。

正则表达式不是制作解析器的好工具（至少对于像 HTML 这样宽容的语法来说不是）

Answer 5

尝试以下方法：

<script\s*\S*\s*(id="([^"]+)")?\s*\S*\s*(src="([^"]+)")\s*\S*\s*(id="([^"]+)")?[^>]*>

由于您不关心类型，只需将其删除，因为它会使事情变得更复杂。然后通过在 src 的任一部分添加两个可选 ID 来强制其余部分。

你也可以这样做

<script\s*(([^=]*)="([^"]*)")+\s*>

获取所有属性，然后在代码中挑选出你想要的。