在文本模板内的对象上使用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通常更可取，因为您不必考虑这一点。

Answer 2

如何才能正确形成通过模板文字创建的链接？

使用设置为JSON属性值的'括起单引号

​

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);

console.log(JSON.parse(root.firstElementChild.dataset.presentations));

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

​