JavaScript正则表达式如何条件替换img标签src属性？-html教程-PHP中文网

JavaScript正则表达式如何条件替换img标签src属性？

霞舞

发布： 2025-02-24 21:38:01

原创

802人浏览过

JavaScript正则表达式如何条件替换img标签src属性？

javascript正则表达式：精准替换img标签src属性

本文探讨如何利用JavaScript正则表达式有选择地替换img标签的src属性值。

需求：

仅替换符合特定条件的img标签的src属性。条件如下：

仅替换src="https://www.php.cn/link/20d3a3223886430b6e2d17c9536ff9fd"的img标签；
保持其他内容不变。

基本替换方案：

立即学习“Java免费学习笔记（深入）”；

使用以下正则表达式实现替换：

/\ssrc="www\.baidu\.com"/

登录后复制

替换内容为：

' src="www.google.com"'

登录后复制

代码示例：

let str = `
  @@##@@@@##@@
  https://www.php.cn/link/20d3a3223886430b6e2d17c9536ff9fd
`;

str = str.replace(/\ssrc="www\.baidu\.com"/, ' src="www.google.com"');
console.log(str);

登录后复制

进阶：排除特定标签

如果需要排除某些img标签，例如包含data-src属性的标签，可以使用负向前瞻(?!)：

let str = `
  <img src="https://img.php.cn/" alt="JavaScript正则表达式如何条件替换img标签src属性？
" /></img><img src="https://img.php.cn/" alt="JavaScript正则表达式如何条件替换img标签src属性？
" /></img><img src="https://img.php.cn/" alt="JavaScript正则表达式如何条件替换img标签src属性？
" /></img><a href="https://www.php.cn/link/20d3a3223886430b6e2d17c9536ff9fd">
  https://www.php.cn/link/20d3a3223886430b6e2d17c9536ff9fd
`;

str = str.replace(/(?<=<img src="https://img.php.cn/" alt="JavaScript正则表达式如何条件替换img标签src属性？
" />
<p>此代码仅替换不包含data-src属性且src="https://www.php.cn/link/20d3a3223886430b6e2d17c9536ff9fd"的img标签。  注意，这只是一个例子，实际应用中需要根据具体需求调整正则表达式。  更复杂的条件需要更精细的正则表达式来处理。</p>
<p>通过以上方法，您可以根据实际需求灵活运用JavaScript正则表达式，精准控制img标签src属性的替换。  请记住，正则表达式编写需要谨慎，测试非常重要，以确保替换结果符合预期。</p><img src="https://img.php.cn/" alt="JavaScript正则表达式如何条件替换img标签src属性？
" /><img.*?\ssrc=")(?!www\.bing\.com)www\.baidu\.com/, 'www.google.com');
console.log(str);

登录后复制

以上就是JavaScript正则表达式如何条件替换img标签src属性？的详细内容，更多请关注php中文网其它相关文章！