javascript - 正则表达式 html 文件 href/src url 模式

Question

构建一个 Electron 应用程序，为您提供任何网站的所有颜色。

为此，应用程序下载 url(如 http://youtube.com )并将其保存为 html。现在应用程序读取 html 文件并搜索链接到可能包含颜色值 (rgb/rgba/#/hsl) 的文件的任何 url，因此这些文件将是 css、js、svg 等。这些 url 被添加到一个数组，稍后由 electron-download-manager 包使用...

例如:["href="/main.css?v=33.1"", "src="http://somesite.com/js/regex.js""]

href="/src="被其他函数移除

我的 url 模式是:

/(href|src)=("|')(.*?)(\.|\/)(css|js|svg|json)(.*?)("|')/g

这很好用，但它不会在结束引号 '/"上结束匹配

第一个例子的匹配是整行，它包含了结束引号之后的所有内容，所以 title=""是 url 的一部分，这是没有意义的

href="https://www.youtube.com/opensearch?locale=de_DE" title="YouTube"><link rel="manifest" href="/manifest.json" // matches everything until json is found

src="bla.css" // works
src='bla.css?ver=123.456' // works

是否有一个正则表达式规则表示“按此字符停止”？

我的规则应该是:

(start with href=", url , ends with .css/.js, optional fileversion(?v=123), quote symbol)

Answer 1

一个正则表达式，用于查找任何具有 src 或 href 属性且值包含其中之一的标签
扩展或子目录 css, js, svg, json这是:

/<[\w:]+(?=(?:[^>"']|"[^"]*"|'[^']*')*?\s(href|src)\s*=\s*(?:(['"])\s*((?:(?!\2)[\S\s])*?[.\/](?:css|js|svg|json)(?:(?!\2)[\S\s])*?)\s*\2))\s+(?:"[\S\s]*?"|'[\S\s]*?'|[^>]*?)+>/

https://regex101.com/r/tKrTSO/1

哪里:

• 属性在组 1 中
• 值在第 3 组

展开

 < [\w:]+               # Any tag

 (?=                    # Assert (a pseudo atomic group)
      (?: [^>"'] | " [^"]* " | ' [^']* ' )*?
      \s 
      ( href | src )         # (1), href or src attribute
      \s* = \s* 
      (?:
           ( ['"] )               # (2), Quote
           \s* 

           (                      # (3 start), value
                (?:
                     (?! \2 )
                     [\S\s] 
                )*?

                [./]                   # One of these extensions or sub-dirs
                (?: css | js | svg | json )

                (?:
                     (?! \2 )
                     [\S\s] 
                )*?
           )                      # (3 end)
           \s*               
           \2 
      )
 )
 \s+ 
 (?: " [\S\s]*? " | ' [\S\s]*? ' | [^>]*? )+
 >