html 图像字符串上的正则表达式

Question

我正在尝试从这个 html 获取图像 ID（位于 src link 的末尾，就在文件类型之前），但出于某种原因，我编写的正则表达式不工作。在这种情况下，访问文档对象不是一个选项，这就是我需要正则表达式的原因。任何帮助将不胜感激

这就是我目前所拥有的，但它在尺寸检查中失败

const imgRegX = /<div class="?preview item"?[^>]*>\s*<img alt="?" sizes= "?"/g;

字符串如下所示：

<div class="preview item"><img alt=""
sizes="(max-width: 440px) 320px"
src= "https://m.testlink.com/test/zx320y230c_4130512.jpg"
srcset= "https://m.testlink.com/test/zx320y230c_4130512.jpg 320w, https://m.testlink.com/test/zx640y460c_4130512.jpg 640w"></div>

Answer 1

以下应该满足您的需要；我通过排除 sizes 和 alt 属性稍微简化了它，因为您显然不需要它们；

/<div\s+class="preview item"[^>]*>\s*<img\s+[\s\S]*?src=\s?".*?([^\/]+?)"/gi

这里至少有一个主要的误解，那就是你对问号的用法。问号（?）是一个量词，在这种情况下意味着“匹配前面字符的 0 或 1”，但前提是前面的字符本身不是量词（我可能错了，但那是是我的理解）。在那种情况下，它变成了一个“惰性”标志，这意味着它不是贪婪（尽可能多地匹配），而是尽可能少地匹配前面量词的模式。

为了匹配你的字符串得到你想要的ID，我们首先使用一个\s白space字符class（任意白space字符），匹配1 次或多次（+ 表示 1 次或多次）。图像点之前的其余正则表达式基本保持不变。

图像标签开始后，我们匹配 1 个或更多 space 个字符，然后我们匹配 0 个或更多 space 和 non-space 个字符（\S 是一个non-space;一个shorthand字符class放入另一个字符class([])组合),尽量少匹配.

最后，我们到达 src 属性；在这里，我们在属性内容（引号中）前面加上可选的 space，然后是标准双引号（如果引号完全改变，您可能需要将其更改为 ["']），然后是 0 或任意数量的任意字符（.（点）匹配任意字符），匹配次数尽可能少，然后是捕获组（()），其中包含任意 [=62= 的匹配] 斜杠字符（已转义，因此不会破坏正则表达式），匹配 1 次或多次，次数越少越好，最后到达最后的结束引号。

我多次使用惰性标志，根据我的经验，如果不使用惰性标志，则匹配的模式有可能超过后续字符。

我添加了 i 标志以便进行搜索 case-insensitive，但您可能需要根据 case-sensitive 您想要的模式进行更改。

这是正则表达式的实际演示：

let reg = /<div\s+class="preview item"[^>]*>\s*<img\s+[\s\S]*?src=\s?".*?([^\/]+?)"/gi;
let str = `<div class="preview item"><img alt=""
sizes="(max-width: 440px) 320px"
src= "https://m.testlink.com/test/zx320y230c_4130512.jpg"
srcset= "https://m.testlink.com/test/zx320y230c_4130512.jpg 320w, https://m.testlink.com/test/zx640y460c_4130512.jpg 640w"></div>`

console.log(reg.exec(str)[1]);

值得注意的是，对于上述代码段，捕获组键控到 .exec() 返回的对象中的位置 1。

最后，这是来自 Regex101 的演示，我的 go-to 正则表达式调试站点。

对于所有其他学习目的，我强烈推荐 regular-expressions.info，这是我自己学习的方式。

html 图像字符串上的正则表达式

Regex on html image string

html

regex

string

regex-lookarounds

react-native