搜索字符串并捕获特定 HTML 属性的值

Question

我需要一个正则表达式来获取所有后续字符串的 src 值，考虑单引号、双引号和无引号。

双引号：

var a = '<script class="anyClass" src="anyFile.js" id="anyID">';
var b = '<script class="anyClass" src="anyFile.js">';
var c = '<script src="anyFile.js" id="anyID">';
var d = '<script src="anyFile.js">';

单引号：

var e = "<script class='anyClass' src='anyFile.js' id='anyID'>";
var f = "<script class='anyClass' src='anyFile.js'>";
var g = "<script src='anyFile.js' id='anyID'>";
var h = "<script src='anyFile.js'>";

不带引号：

var i= "<script class=anyClass src=anyFile.js id=anyID>";
var j= "<script class=anyClass src=anyFile.js>";
var k= "<script src=anyFile.js id=anyID>";
var l= "<script src=anyFile.js>";

预期匹配/返回：

anyFile.js

我有这个看起来很差的拆分解决方案：

var file = "";
var match = 'src="';
if(a.indexOf(match)>=0){
  file = a.split(match);
  file = file[1];
  file = file.split('.js"');
  file = file[0] + ".js";
}
else{
  match = "src='";
  if(a.indexOf(match)>=0){
    file = a.split(match);
    file = file[1];
    file = file.split(".js'");
    file = file[0] + ".js";
  }
  else{
    match = "src=";
    if(a.indexOf(match)>=0){
      file = a.split(match);
      file = file[1];
      file = file.split('.js');
      file = file[0] + ".js";
    }
    else {
    file = "no match";
    }
  }
}

但它可以匹配错误的src 属性，所以我需要一个正则表达式。

任何帮助将不胜感激。

解决方案（特别感谢 Rajesh）

var a = "<script class='anyClass' src='anyFile.js' id='anyID'>";
var b = '<script class="anyClass" src="anyFile.js">';
var c = '<script src="anyFile.js" id="anyID">';
var d = '<script src="anyFile.js">';

var e = "<script class='anyClass' src='anyFile.js' id='anyID'>";
var f = "<script class='anyClass' src='anyFile.js'>";
var g = "<script src='anyFile.js' id='anyID'>";
var h = "<script src='anyFile.js'>";

var i= "<script class=anyClass src=anyFile.js id=anyID>";
var j= "<script class=anyClass src=anyFile.js>";
var k= "<script src=anyFile.js id=anyID>";
var l= "<script src=anyFile.js>";
var l= "<script src=anyFile.js>";

function getSrc(str){
  var regex = /src=["']*[^"' >]+/;
  var match = str.match(regex);
  if(match!==null){
    match = match[0];
    var replaceRegex = /src=["' ]*/;
    match = match.replace(replaceRegex, "")
  }
  else{
    match = "no match";
  }
  console.log(match);
}

[a,b,c,d,e,f,g,h,i,j,k,l].forEach(getSrc)

Answer 1

你可以试试这样的：

逻辑：

• 搜索模式 src= 后跟单引号/双引号 [可选] 后跟任何非单引号/双引号。
• 这将产生类似src="anyfile.js 的内容。
• 现在替换首字母，即src=，后跟可选引号。

正则表达式版本

var a = '<script class="anyClass" src="anyFile.js" id="anyID">';
var b = '<script class="anyClass" src="anyFile.js">';
var c = '<script src="anyFile.js" id="anyID">';
var d = '<script src="anyFile.js">';
var i= "<script class=anyClass src=anyFile.js id=anyID>";
var j= "<script class=anyClass src=anyFile.js>";
var k= "<script src=anyFile.js id=anyID>";
var l= "<script src=anyFile.js>";

function getSrc(str){
  var regex = /src=["']*[^"' >]+/;
  var match = str.match(regex)[0];
  var replaceRegex = /src=["' ]*/;
  match = match.replace(replaceRegex, "")
  console.log(match)
}

[a,b,c,d,i,j,k,l].forEach(getSrc)

Answer 2

这是我想出的实现这一目标的方法。欢迎任何改进：

script src=["']?(\w+\.js)

https://regex101.com/r/6NCj94/2

或者对于脚本名称类似于 jquery.min.js 的情况：

script src=["']?(.*\.js)

https://regex101.com/r/6NCj94/3

Answer 3

我更喜欢正确的方式，使用 DOM：

var scripts = document.getElementsByTagName('script');
Array.prototype.forEach.call(scripts, (script => console.log(script.src)));

完整的javascript代码：

var a = '<script src="anyFile1.js"><\/script>';
var b = '<script src=\'anyFile2.js\'><\/script>';
var c = '<script src=anyFile3.js><\/script>';

var html = document.createElement('div');
html.innerHTML = a + b + c;

var scripts = html.getElementsByTagName('script');
[].forEach.call(scripts, (script => console.log(script.src)));

正则表达式方式

<script[^>]+?src=(['"]?)([^\s>]+)\1[^>]*>(<\/script>)?

Live demo

str.replace(/<script[^>]+?src=(['"]?)([^\s>]+)\1[^>]*>(<\/script>)?/g, (
    (match, $0, $1) => $1 ? array.push($1) : ''
))

完整的JS代码：

const str = `<script class="anyClass" src="anyFile.js" id="anyID">
<script class="anyClass" src="anyFile.js">
<script src="anyFile.js" id="anyID">
<script src="anyFile.js">


<script class='anyClass' src='anyFile.js' id='anyID'>
<script class='anyClass' src='anyFile.js'
<script src='anyFile.js' id='anyID'>
<script src='anyFile.js'>

<script class=anyClass src=anyFile.js id=anyID>
<script class=anyClass src=anyFile.js>
<script src=anyFile.js id=anyID>
<script src=anyFile.js >`;

var array = [];

str.replace(/<script[^>]+?src=(['"]?)([^\s>]+)\1[^>]*>(<\/script>)?/g, (
    (match, $0, $1) => $1 ? array.push($1) : ''
))

console.log(array)