如何修改 html 标签中带有 javascript 的 type(ld+json) 值？

Question

我正在使用 javascript 修改 html 脚本标签中的 "application/ld+json"，但我无法 select json 值并将其更改为原始 js.

hexo 3.9
os: Linux 4.4.0-18362-Microsoft linux x64
节点：13.0.1

<script id="myjsonid" type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "mainEntityOfPage": "<%- config.url + url_for(path) %>",
        "headline": "<%- page.title %>",
        "datePublished": "<%= page.date %>",
        "dateModified": "<%= page.updated %>",
        "image": "<%= page.thumbnail %>",
        "author": {
            "@type": "Person",
            "name": "<%= config.author %>",
            "image": {
                "@type": "ImageObject",
                "url": "<%= theme.img.avatar %>"
            },
            "description": "<%- theme.uiux.slogan %>"
        },
        "publisher": {
            "@type": "Organization",
            "name": "<%= config.title %>",
            "logo": {
                "@type": "ImageObject",
                "url": "<%= theme.head.high_res_favicon %>"
            }
        },
        "keywords": "<% if(page.tags && page.tags.each) { page.tags.each(function(tag) { %><%- tag.name + ',' %><% })} %><%= theme.head.keywords %>",
        "description": "<% if(page.description) { %><%= page.description %><% } else if(page.excerpt){ %><%= strip_html(page.excerpt).replace(/^s*/, '').replace(/s*$/, '') %><% } else if (config.description){ %><%= config.description %><% } %>"
    }
</script>
<script>
    roundsum = Math.round(Math.random()*"<%= theme.thumbnail.random_amount %>"+1);
    testvar = document.getElementById("myjsonid");
</script>

现在我不知道该怎么办，我是否错过了一些 api 文件？

Answer 1

firstChild 为您提供了一个包含脚本文本的文本节点。您可以使用它的 nodeValue 属性 (spec, MDN) 来获取和设置文本：

const script = document.getElementById("myjsonid");
script.firstChild.nodeValue = '{"foo": 1}'; // Completely replace it
console.log(script.firstChild.nodeValue);

实例：

const script = document.getElementById("myjsonid");
script.firstChild.nodeValue = '{"foo": 1}'; // Completely replace it
console.log(script.firstChild.nodeValue);

<script id="myjsonid" type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "mainEntityOfPage": "<%- config.url + url_for(path) %>",
        "headline": "<%- page.title %>",
        "datePublished": "<%= page.date %>",
        "dateModified": "<%= page.updated %>",
        "image": "<%= page.thumbnail %>",
        "author": {
            "@type": "Person",
            "name": "<%= config.author %>",
            "image": {
                "@type": "ImageObject",
                "url": "<%= theme.img.avatar %>"
            },
            "description": "<%- theme.uiux.slogan %>"
        },
        "publisher": {
            "@type": "Organization",
            "name": "<%= config.title %>",
            "logo": {
                "@type": "ImageObject",
                "url": "<%= theme.head.high_res_favicon %>"
            }
        },
        "keywords": "<% if(page.tags && page.tags.each) { page.tags.each(function(tag) { %><%- tag.name + ',' %><% })} %><%= theme.head.keywords %>",
        "description": "<% if(page.description) { %><%= page.description %><% } else if(page.excerpt){ %><%= strip_html(page.excerpt).replace(/^s*/, '').replace(/s*$/, '') %><% } else if (config.description){ %><%= config.description %><% } %>"
    }
</script>

您还可以在 script 元素本身上使用 textContent (spec, MDN) or innerText (spec, MDN)：

const script = document.getElementById("myjsonid");
script.firstChild.nodeValue = '{}'; // Completely replace it
console.log(script.firstChild.nodeValue);

实例：

const script = document.getElementById("myjsonid");
script.textContent = '{"foo": 1}'; // Completely replace it
console.log(script.firstChild.nodeValue);
script.innerText = '{"foo": 2}'; // Completely replace it
console.log(script.firstChild.nodeValue);

<script id="myjsonid" type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "mainEntityOfPage": "<%- config.url + url_for(path) %>",
        "headline": "<%- page.title %>",
        "datePublished": "<%= page.date %>",
        "dateModified": "<%= page.updated %>",
        "image": "<%= page.thumbnail %>",
        "author": {
            "@type": "Person",
            "name": "<%= config.author %>",
            "image": {
                "@type": "ImageObject",
                "url": "<%= theme.img.avatar %>"
            },
            "description": "<%- theme.uiux.slogan %>"
        },
        "publisher": {
            "@type": "Organization",
            "name": "<%= config.title %>",
            "logo": {
                "@type": "ImageObject",
                "url": "<%= theme.head.high_res_favicon %>"
            }
        },
        "keywords": "<% if(page.tags && page.tags.each) { page.tags.each(function(tag) { %><%- tag.name + ',' %><% })} %><%= theme.head.keywords %>",
        "description": "<% if(page.description) { %><%= page.description %><% } else if(page.excerpt){ %><%= strip_html(page.excerpt).replace(/^s*/, '').replace(/s*$/, '') %><% } else if (config.description){ %><%= config.description %><% } %>"
    }
</script>

您在评论中说过要更改结构的一个特定部分。为此，在字符串上使用 JSON.parse 以获得 JSON 的对象树，在该树中进行更改，然后使用 JSON.stringify 获取 JSON 字符串写回 script 元素：

const script = document.getElementById("myjsonid");
const obj = JSON.parse(script.firstChild.nodeValue);
obj.image = "***THIS IS THE UPDATE***";
script.firstChild.nodeValue = JSON.stringify(obj);
console.log(script.firstChild.nodeValue);

实例：

const script = document.getElementById("myjsonid");
const obj = JSON.parse(script.firstChild.nodeValue);
obj.image = "***THIS IS THE UPDATE***";
script.firstChild.nodeValue = JSON.stringify(obj);
console.log(script.firstChild.nodeValue);

<script id="myjsonid" type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "mainEntityOfPage": "<%- config.url + url_for(path) %>",
        "headline": "<%- page.title %>",
        "datePublished": "<%= page.date %>",
        "dateModified": "<%= page.updated %>",
        "image": "<%= page.thumbnail %>",
        "author": {
            "@type": "Person",
            "name": "<%= config.author %>",
            "image": {
                "@type": "ImageObject",
                "url": "<%= theme.img.avatar %>"
            },
            "description": "<%- theme.uiux.slogan %>"
        },
        "publisher": {
            "@type": "Organization",
            "name": "<%= config.title %>",
            "logo": {
                "@type": "ImageObject",
                "url": "<%= theme.head.high_res_favicon %>"
            }
        },
        "keywords": "<% if(page.tags && page.tags.each) { page.tags.each(function(tag) { %><%- tag.name + ',' %><% })} %><%= theme.head.keywords %>",
        "description": "<% if(page.description) { %><%= page.description %><% } else if(page.excerpt){ %><%= strip_html(page.excerpt).replace(/^s*/, '').replace(/s*$/, '') %><% } else if (config.description){ %><%= config.description %><% } %>"
    }
</script>

如何修改 html 标签中带有 javascript 的 type(ld+json) 值？

How can I modify the type(ld+json) value with javascript in html label?

javascript

ejs

hexo