使用 RegEx 提取 HTML 元素的属性

Question

我正在处理一些图像延迟，并且正在寻找一种删除 src 元素的方法。 我有一个特定的用例，我需要使用正则表达式，以便我可以在服务器端呈现结果并停止加载 src，直到我在 JS 中告诉它。

基本上我需要一种方法来可靠地替换图像标签中的src 。 不是值，而是实际的属性名称。

截至目前，我正在测试以下内容：

<img[^>]+src\\s*=\\s*['"]([^'"]+)['"][^>]*> 。

给出我的示例文本，找到整个字符串<img src="aaaa" /> 。 我基本上只需要它来突出src 。 这样我就可以 regex_replace 将src更改为data-deferred 。

示例文本

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum lorem bibendum lectus rhoncus molestie. <img src ="aaaa" /> Maecenas ipsum justo, fermentum nec lacus in, porta consectetur metus.

这是我的 Regex101： https ://regex101.com/r/RATGgw/1/

因为我并不总是可以访问我将不得不解析的 HTML，所以我不能只定位src 。 我需要确保在图像标签内的任何地方找到它时它只是src 。

知道我如何修改它以实现这一目标吗？

编辑：

为了澄清问题，我如何使用 RegEx 才能仅在图像标签中找到src属性。

所以我找到的结果将允许我用自定义数据属性替换src="https://" ，如data-deferred="https://" 。

Answer 1

您可以通过在正则表达式中使用捕获组（括号）来将src属性替换为data-deferred属性，如下所示：

 // [ $1 ][$2 ][?= a lookahead (no capture) ][global - replace all] var regex = /(<img[^>]+)(src)(?=\\s*=\\s*['"][^'"]+['"][^>]*>)/g; var text = 'Lorem ipsum. <img alt="foo" src ="aaaa" title="bar" /> Maecenas metus.'; var result = text.replace(regex, '$1data-deferred'); console.log(result); // Lorem ipsum. <img alt="foo" data-deferred ="aaaa" title="bar" /> Maecenas metus.

Answer 2

您想将 jQuery 用于这样的事情：

$('img[data-deferred]').each(function(i, img){
  $(img).attr('src', $(img).attr('data-deferred'))
})