JavaScript Array.join处理转义双引号的问题求助

我们在使用JavaScript的Array.prototype.join方法时遇到了问题。我们有一个由HTML字符串片段组成的数组，这些片段包含转义双引号（\"）。需要在HTML元素的标题和文本中使用字符串：

4" display

用于拼接的数组代码如下：

var myArray = [
    "<a href=\"", 
    "http://www.example.com/", 
    "\"", 
    " ", 
    "title=\"", 
    "4\" display", 
    "\"", 
    ">", 
    "4\" display", 
    "</a>"
];
myArray.join('');

这段代码的输出结果为：

'<a href="http://www.example.com/" title="4" display">4" display</a>'

这并不是我们期望的结果，我们想要生成的HTML字符串是：

'<a href="http://www.example.com/" title="4\" display">4\" display</a>'

我们尝试再次转义反斜杠：

"4\\\" display",

但结果变成了：

'<a href="http://www.example.com/" title="4\\" display">4\\" display</a>'

此外，我们无法控制标题和文本内容（来自不可控的数据源），不能用其他ASCII字符替代双引号。尝试将数组项改为模板字符串，结果依旧相同。

请问有没有其他写法可以让join方法正确识别转义序列，得到我们期望的HTML字符串？

问题核心是混淆了JavaScript字符串转义和HTML实体转义的逻辑：

• JavaScript里的\"只是表示一个普通的双引号字符（"`"）；
• 但在HTML属性中，若属性用双引号包裹，内部的双引号必须转成HTML实体"，浏览器才会把它当成属性值的一部分，而非属性结束标志。

正确实现步骤 #

如果数据源返回的内容带有原生双引号，先将其中的"替换为"，再进行拼接：

// 假设原始内容来自不可控数据源
const displayText = "4\" display";
// 全局替换双引号为HTML实体
const escapedText = displayText.replace(/"/g, """);

var myArray = [
    "<a href=\"", 
    "http://www.example.com/", 
    "\"", 
    " ", 
    "title=\"", 
    escapedText, 
    "\"", 
    ">", 
    escapedText, 
    "</a>"
];

const result = myArray.join('');
// 输出结果：'<a href="http://www.example.com/" title="4&quot; display">4&quot; display</a>'

生成的HTML在浏览器解析时，title属性会正确显示为4" display，同时HTML结构不会被破坏。

为什么之前的方法无效？ #

• 用\"仅能在JavaScript字符串中表示普通双引号，拼接到HTML属性里时，浏览器会把这个"当成属性结束符，导致title被截断为4，后续内容变成无效属性碎片；
• 转义反斜杠得到的\\"，在JavaScript中会解析为\"，拼接到HTML后会直接显示为\"，并非浏览器可识别的实体，不符合需求。

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