将HTML字符串解析为DOM元素：锚标签解析异常问题

问题根源 #

你的HTML字符串里，<a和href之间的空格不是普通空格（U+0020），而是非断行空格（U+00A0）。HTML解析器会把这种非标准空格识别为属性的分隔符，导致href属性被错误拆分，进而出现斜杠丢失、属性在闭合标签重复的异常。

解决步骤 #

核心是先将字符串里的非断行空格替换成普通空格，再执行解析操作：

• 用正则表达式匹配所有非断行空格（\u00A0），替换为普通空格
• 再使用你原本的两种解析方法处理清理后的字符串

修复后的代码示例 #

Template方法 #

let htmlString = '<div><h2>Absolute URLs</h2><p><a href="https://www.w3.org/">W3C</a></p><p><a href="https://www.google.com/">Google</a></p><h2>Relative URLs</h2><p><a href="html_images.asp">HTML Images</a></p><p><a href="/css/default.asp">CSS Tutorial</a></p></div>';

// 替换所有非断行空格为普通空格
htmlString = htmlString.replace(/\u00A0/g, ' ');

let template = document.createElement('template');
htmlString = htmlString.trim();
template.innerHTML = htmlString;

console.log(template.content.firstChild);

DOMParser方法 #

let htmlString = '<div><h2>Absolute URLs</h2><p><a href="https://www.w3.org/">W3C</a></p><p><a href="https://www.google.com/">Google</a></p><h2>Relative URLs</h2><p><a href="html_images.asp">HTML Images</a></p><p><a href="/css/default.asp">CSS Tutorial</a></p></div>';

// 替换所有非断行空格为普通空格
htmlString = htmlString.replace(/\u00A0/g, ' ');

let docs = new DOMParser().parseFromString(htmlString,'text/html');
console.log(docs.body.firstChild);

验证结果 #

修复后解析出的DOM结构会恢复正常，锚标签的href属性完整保留，不会出现拆分和重复的情况：

<div>
  <h2>Absolute URLs</h2>
  <p><a href="https://www.w3.org/">W3C</a></p>
  <p><a href="https://www.google.com/">Google</a></p>
  <h2>Relative URLs</h2>
  <p><a href="html_images.asp">HTML Images</a></p>
  <p><a href="/css/default.asp">CSS Tutorial</a></p>
</div>

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