正则表达式 html 文件 href/src url 模式答案

【问题标题】：regex html file href/src url pattern正则表达式 html 文件 href/src url 模式
【发布时间】：2019-12-25 16:56:26
【问题描述】：

构建一个 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=" 被其他函数移除

我的网址格式是：

/(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

是否有一个正则表达式规则说“停止这个字符”？

我的规则应该是：

（以 href=" 开头，url ，以 .css/.js 结尾，可选文件版本(?v=123)，引号）

【问题讨论】：

Parse the HTML 代替，然后使用parsedDoc.querySelectorAll('link').forEach(...) 之类的东西来获取hrefs。
你想在哪里使用 not 运算符？在正则表达式中，^ 是一个非运算符，您可以像这样使用它[^__]

标签： javascript regex electron

【解决方案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]*? ' | [^>]*? )+
 >

【讨论】：