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);

解释

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