JavaScript动态生成HTML锚点在各浏览器中输出异常的原因咨询

嘿，我来帮你搞定这个跨浏览器生成HTML锚点的棘手问题！

首先咱们拆解下你遇到的两个异常：

• 所有浏览器插入空格+多余=""：这基本是因为你构建HTML锚点时，属性值没严格用引号包裹，浏览器为了修复无效的HTML语法，自动补全了这些内容；
• Edge颠倒参数顺序：大概率是你用了对象字面量来拼接URL参数，早期Edge对对象属性的遍历顺序不遵循ES6规范，导致参数顺序乱掉。

假设你原来的代码大概是这样（有问题的版本）：

function makeChapterLink() {
  const params = { date: getTodayDate(), chapter: getTodaysChapter() };
  const paramString = Object.keys(params).map(k => `${k}=${params[k]}`).join('&');
  const fullUrl = getUrl() + '?' + paramString;
  return `<a href=${fullUrl}>今日章节</a>`; // 这里没给href加引号！
}

1. 给HTML属性值加上严格的引号 #

这是解决空格和多余=""的核心！浏览器对未加引号的属性值会做“容错修复”，所以必须给href包裹双引号（或单引号）：

// 错误写法：<a href=${fullUrl}>
// 正确写法：
return `<a href="${fullUrl}">今日章节</a>`;

2. 用数组固定URL参数顺序（解决Edge顺序问题） #

别依赖对象的遍历顺序，改用数组来定义参数顺序，保证所有浏览器都一致：

// 用数组固定参数顺序，彻底避免遍历顺序的不确定性
const paramArray = [
  `date=${encodeURIComponent(getTodayDate())}`,
  `chapter=${encodeURIComponent(getTodaysChapter())}`
];
const paramString = paramArray.join('&');
const fullUrl = `${getUrl()}?${paramString}`;

3. 额外优化：对URL参数编码 #

别忘了用encodeURIComponent()处理参数值，避免特殊字符（比如空格、&、中文）导致的URL解析错误，这也是跨浏览器兼容的关键细节：

// 对参数值编码，确保URL在所有浏览器中都能正确解析
const encodedDate = encodeURIComponent(getTodayDate());
const encodedChapter = encodeURIComponent(getTodaysChapter());
const fullUrl = `${getUrl()}?date=${encodedDate}&chapter=${encodedChapter}`;

修复后生成的HTML应该是标准格式，比如：

<a href="https://your-api-domain.com?date=2024-05-20&chapter=第15章">今日章节</a>

这时所有浏览器都会正确解析，不会出现多余的空格和=""，Edge也会保持参数顺序完全一致。

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