使用 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'))
})