javascript - 对文字模板中的对象使用 JSON.stringify 时出现意外结果

Question

我正在动态创建两个链接，一个使用模板文字，另一个使用 document.createElement()，在这两个链接中，我都需要将对象作为字符串作为属性 data-presentation 传递。但我得到了不同的结果。

当我检查使用模板文字创建的链接时，我得到以下结果

<a href="#" data-presentations="[{" name":"cremas","measures":["5g","15g"]}]"="">Click</a>

并且因为当我需要解析它时它的格式很糟糕，所以我得到一个错误返回。

另一方面，使用 document.createElement () 创建的链接经检查后返回以下结果。

<a href="#" data-presentations="[{&quot;name&quot;:&quot;Cremas&quot;,&quot;measures&quot;:[&quot;5g&quot;,&quot;15g&quot;]}]">Another click</a>

然后当我需要解析它时，它就可以正常工作。

请看一下链接的创建方式

const root = document.querySelector('#root');
const object = {
    "id": 4,
    "name": "Medicine1",
    "code": "1234",
    "status": true,
    "location": "E4-2",
    "genericName": "SomeGenericName",
    "presentations": [
        {
            "name": "Cremas",
            "measures": [
                "5g",
                "15g"
            ]
        }
    ]
};

const link = `<a href="#" data-presentations="${JSON.stringify(object.presentations)}">Click</a>`

const anchor = document.createElement('a');

anchor.href = '#';
anchor.setAttribute('data-presentations', JSON.stringify(object.presentations));
anchor.textContent = 'Another click';

root.innerHTML = link;

document.body.appendChild(anchor)

<div id="root"></div>

我该怎么做才能正确形成通过模板文字创建的链接？

Answer 1

您需要根据 JSON 所使用的 HTML 上下文对其进行转义。双引号属性值？转义 & 符号和双引号:

const escapeDoubleQuoted = text =>
    text.replace(/&/g, '&')
        .replace(/"/g, '"');

单引号属性值？转义 & 符号和单引号:

const escapeSingleQuoted = text =>
    text.replace(/&/g, '&')
        .replace(/'/g, ''');

如果您想将其包含在 <script> 中，你需要逃脱 <如\x3c ;等等。因此 HTML 构建方法的正确版本是:

const link = `<a href="#" data-presentations='${escapeSingleQuoted(JSON.stringify(object.presentations))}'>Click</a>`

当您不引入 HTML 构建库时，DOM 通常更可取，因为您不必考虑这一点。