Question

我有一个包含一些HTML代码的字符串：

var myString = '<html> ... <script src="/cmn/libs/js/myJavascriptFile.js"></script> 
<link rel="stylesheet" href="../assets/myCssFile.css"/> ... </html>';

我希望匹配所有导入的文件而不使用PATH，如下所示：myJavascriptFile.js，myCssFile.css

我试过这个正则表达式

var myRegexp = /src="(.*)"|href="(.*)"/g;
var match = myRegexp.exec(myString);

但它给了我整条路径，我想如果import有单引号就会失败。这里最好的方法是什么？感谢

这是我做的测试：https://regex101.com/r/gL8lO7/2

Answer 1

var html = document.getElementById("data").value;

var res = [];

html.replace(/(?:src|href)=(["'])(?:.*?)([^\\/"]*?)\1/g, function (match, quote, name) {
  res.push(name);
})

console.log(res);

textarea { display: block; width: 100%; }

<textarea id=data><html> ... <script src="/cmn/libs/js/myJavascriptFile.js"></script>
<link rel="stylesheet" href='../assets/myCssFile.css'/> ... </html></textarea>

Answer 2

您可以使用以下正则表达式。

(?:src|href)=("|').*?([\w.]+\.(?:js|css))\1

RegEx101 Demo

RegEx说明：

(?:src|href)=：匹配src=或href=
("|')：匹配单引号'或双引号"并将其添加到第一个捕获的组中。
.*?：懒洋洋地匹配任何字符以满足条件
([\w.]+\.(?:js|css))：第二个被捕获的小组
1. [\w.]+\.：匹配任何字母数字字符并下划一次或多次，然后加点。
2. (?:js|css)：匹配js或css。
\1：对第一个捕获组的反向引用。在第一个捕获的组中匹配相同的内容。即单引号或双引号。

<强>演示：

var str = '<script src="\/cmn\/libs\/js\/myJavascriptFile.js"><\/script><link rel="stylesheet" href="..\/assets\/myCssFile.css" \/><script src=\'\/cmn\/libs\/js\/myJavascriptFile.min.js\'><\/script><link rel="stylesheet" href=\'0..\/assets\/myCssFile.css\'\/>';

var allFiles = [];

var regex = /(?:src|href)=("|').*?([\w.]+\.(?:js|css))\1/gi;

var fileName = '';

while(fileName = regex.exec(str)) {
    allFiles.push(fileName[2]);
}

console.log(allFiles);

导入脚本中的javascript regex for filename（js / css）

2 个答案: