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

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

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

单引号属性值？转义符和单引号：

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

如果您想将其包含在<script>中，则需要将<换成\x3c；等等。因此，HTML构建方法的正确版本是：

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

当您不引入HTML构建库时，通常会首选DOM，因为您不必考虑这一点。

Answer 2

我该怎么办，以便通过模板文字创建的链接是格式正确吗？

在'周围使用单引号JSON设置为HTML属性的值

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>

在文字模板内的对象上使用JSON.stringify时获得意外结果

2 个答案: