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的能力？

编辑要匹配的字符串来自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);
});

这比我解析Regex的脚本效果要好得多。

Answer 4

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

正则表达式不是一个很好的工具来制作解析器（至少不是像HTML那样宽容的语法）

Answer 5

尝试以下方法：

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

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

或者你可以做

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

获取所有属性，然后在代码中选择所需的属性。

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

5 个答案: