代码之家 › 专栏 › 技术社区 › Mario

使用时得到意外结果JSON.stringify在文本模板中的对象上

javascript

Mario · 技术社区 · 6 年前

data-presentation

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

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

因为当我需要解析它时,它的格式不正确,所以我得到了一个错误的返回。

另一方面,使用文档.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>

如何才能使通过模板文本创建的链接的格式正确?

1 回复 | 直到 6 年前

Ry- 6 年前

您需要根据JSON在其中使用的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通常更可取,因为您不必考虑这一点。

-2

guest271314 6 年前

我该怎么做才能使通过模板文本创建的链接

' 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前