js正则给img的src添加域名

基础概念

正则表达式（Regular Expression）是一种文本模式，包含普通字符（例如字母和数字）和特殊字符（称为"元字符"）。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。

在JavaScript中，正则表达式是通过RegExp对象表示的，它是一种强大的文本处理工具，常用于检索、替换那些符合某个模式的文本。

相关优势

• 灵活性：正则表达式提供了灵活的方式来匹配各种复杂的文本模式。
• 效率：相比于其他文本处理方法，正则表达式通常更加高效。
• 广泛支持：几乎所有的现代编程语言都支持正则表达式。

类型

• 简单匹配：如 /abc/ 匹配字符串中的 "abc"。
• 复杂模式：如 /\d{3}-\d{2}-\d{4}/ 匹配美国社会安全号码。
• 替换操作：使用 replace() 方法结合正则表达式进行文本替换。

应用场景

• 表单验证：检查用户输入是否符合特定格式。
• 数据提取：从大量文本中提取特定信息。
• 文本清洗：替换或删除文本中的不需要的部分。

问题解决

假设我们有一段HTML代码，其中包含多个<img>标签，但没有指定src属性的域名。我们需要给这些src属性添加一个域名。

示例代码

// 假设这是我们的HTML字符串
const html = `
<div>
  <img src="/images/image1.jpg" alt="Image 1">
  <img src="/images/image2.png" alt="Image 2">
</div>
`;

// 定义正则表达式，匹配没有域名的src属性
const regex = /<img src="([^"]+)" alt="[^"]*">/g;

// 使用replace()方法替换匹配到的内容
const newHtml = html.replace(regex, (match, p1) => {
  // 给src属性添加域名
  return `<img src="https://example.com${p1}" alt="${match.match(/alt="([^"]*)"/)[1]}">`;
});

console.log(newHtml);

解释

1. 正则表达式：/<img src="([^"]+)" alt="[^"]*">/g
   • /<img src="：匹配开始标签 <img src="。
   • ([^"]+)：捕获组，匹配并捕获 src 属性的值（即图片路径）。
   • alt="[^"]*"：匹配 alt 属性及其值。
   • ">：匹配结束标签 ">。
   • g：全局匹配标志，表示匹配所有符合条件的子字符串。

• replace()方法：
  • 第一个参数是正则表达式。
  • 第二个参数是一个回调函数，接收匹配到的字符串和捕获组作为参数。
  • 在回调函数中，我们构造新的<img>标签，给src属性添加域名。

参考链接

• MDN Web Docs: Regular Expressions
• MDN Web Docs: String.prototype.replace()

通过这种方式，我们可以高效地为多个<img>标签的src属性添加域名。