如何为字符串中所有href前缀添加指定字符串？

需求说明 #

需要处理包含HTML内容的字符串，为所有<a>标签的href属性值开头添加指定前缀https://www.google.com/，最终将href替换为https://www.google.com/{原href内容}。当前实现仅能修改第一个href，需实现批量处理任意数量链接的方案。

现有问题代码 #

let stringOne = '<div>
    <p>A cool label</p>
    <a href="123idofanitem">Link 1</a>
    <p>A cool label</p>
    <span>
      <a href="1234idofanitem">Link 2</a>
    </span>
    <ul>
      <li>
        <a href="12345idofanitem">Link 3</a>
      </li>
      <li>
        <a href="123456idofanitem">Link 4</a>
      </li>
    </ul>
  </div>'

let index = stringOne.indexOf('href="');
let output = [stringOne.slice(0, index + 6),
   'https://www.google.com/',
    stringOne.slice(index + 6),].join('');//added +6 to account for href="

最佳实践方案 #

方案1：正则表达式全局替换 #

适合结构简单、href属性格式统一的HTML字符串，通过全局正则匹配所有href="并替换为带前缀的内容：

const prefix = "https://www.google.com/";
// 全局匹配所有href="，替换为带前缀的版本
const processedString = stringOne.replace(/href="/g, `href="${prefix}`);

如果需要避免重复添加前缀（比如原href已包含该前缀），可以调整正则匹配规则，仅匹配前缀不存在的情况：

const processedString = stringOne.replace(/href="(?!https:\/\/www\.google\.com\/)/g, `href="${prefix}`);

方案2：DOM解析（更鲁棒） #

处理复杂HTML时（比如嵌套标签、href使用单引号/无引号、属性值含特殊字符），用浏览器原生DOM解析更可靠，避免正则匹配的局限性：

const parser = new DOMParser();
// 将HTML字符串解析为DOM文档
const doc = parser.parseFromString(stringOne, "text/html");
// 获取所有<a>标签
const links = doc.querySelectorAll("a");

links.forEach(link => {
  const originalHref = link.getAttribute("href");
  if (originalHref) {
    // 添加前缀并设置新的href
    link.setAttribute("href", `https://www.google.com/${originalHref}`);
  }
});

// 将修改后的DOM转回字符串
const processedString = doc.body.innerHTML;

方法对比 #

• 正则替换：代码简洁、执行快，适合固定格式的简单HTML，但无法处理复杂场景（如href属性写法不统一）。
• DOM解析：兼容性好、能处理所有标准HTML结构，是处理HTML内容的推荐方案，尤其当HTML结构不确定时。

内容的提问来源于stack exchange，提问作者Cookies