使用JSON.stringify处理含a标签outerHTML的多维数组时出现转义异常

我尝试对包含字符串和锚点标签outerHTML的多维数组执行JSON.stringify操作，但outerHTML文本中被添加了双重转义符\，导致生成无效JSON。

代码示例 #

const a = document.getElementsByTagName('a')[0].outerHTML;
const array = [["a", a],["b", a],["c", a]];
const json = JSON.stringify(array);

执行结果 #

'[["a","<a href=\\"https://www.google.com/\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Link</a>"], 
["b","<a href=\\"https://www.google.com/\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Link</a>"], 
["c","<a href=\\"https://www.google.com/\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Link</a>"]]'

首先明确：你看到的双重转义符是控制台打印时的显示效果，并非实际JSON字符串中的内容。JSON.stringify会为了符合JSON格式要求，对字符串内部的双引号添加单个转义符\，而控制台在展示字符串字面量时，会把这个转义符再转义一次（显示为\\），这只是视觉表现，实际生成的JSON是完全有效的。

你可以通过解析验证这一点：

const parsed = JSON.parse(json);
console.log(parsed); // 能正常解析，说明JSON格式没问题

如果要将这个JSON用于写入文件、发送请求等场景，直接使用json变量即可，它的实际内容符合JSON规范，不存在双重转义。

另外注意代码里的拼写错误：getElementByTagName应该改为getElementsByTagName（缺少字母s），修正后才能正确获取页面中的锚点元素。

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