如何从js更改html中脚本标签中的数据？

Posted 2023-03-24

【中文标题】如何从js更改html中脚本标签中的数据？

【英文标题】：How to change the data in script tags in html from js?

【发布时间】：2018-05-15 01:10:07

【问题描述】：

我的 html 中有以下脚本标签，

 <script type="application/ld+json">
        
          "@context": "http://schema.org",
          "@type": "VideoObject",
          "name": "Title",
          "description": "Video description",
          "thumbnailUrl": [
            "https://www.xpertdox.com/assets/images/XperDox_Cover_Art .png"
           ],
          "uploadDate": "2015-02-05T08:00:00+08:00",
          "duration": "PT1M51S",
          "embedUrl": "https://www.youtube.com/watch?v=LDIYgpraBHA",
          "interactionCount": "2347"
        
    </script>

我想通过我的 js 文件向它附加值，比如

"name": "My Title",
"description": "My description"

但我不知道如何为 js 的脚本标签赋值。我正在使用 angular js。任何人都可以建议我帮忙。谢谢..

【问题讨论】：

您的 JSON 对象是否未映射到某种变量？它本身不会向页面输出任何内容。

正如@ObsidianAge 所说，如果没有分配给变量，则无法访问该对象。喜欢let yourObj = all that content 然后你可以有yourObj.name = "My Title" 或yourObj["name"] = "My Title"

【参考方案1】：

我对你的意思有些困惑，但我创建了一个可能有用的东西的 sn-p。

通过使用 id 或查询选择器获取对它的引用，可以使用 javascript 从 json-script-tag 元素中获取内容。

一旦有了引用，就可以将 json-script-tag 的文本解析为 JavaScript 对象，并像处理普通对象一样对其进行操作。

最后，您可以将修改后的 JSON 写回脚本元素，尽管我不确定在什么情况下这将是处理数据传递的合适模式。

// get a reference to the script element
var jsonScript = document.querySelector('script[type="application/ld+json"]');
// parse the json-data element into a JS object
var json = JSON.parse(jsonScript.innerHTML)

// Set the object properties as required
json["name"] = "My Title"
json["description"] = "My description"

// write out the object back to the script tag (with pretty formatting)
// check in your browser developer tools to see the modified tag
jsonScript.innerHTML = JSON.stringify(json, null, 2)

console.log('Script modified - check your developer tools to see the changes')

<script type="application/ld+json">
        
          "@context": "http://schema.org",
          "@type": "VideoObject",
          "name": "Title",
          "description": "Video description",
          "thumbnailUrl": [
            "https://www.xpertdox.com/assets/images/XperDox_Cover_Art .png"
           ],
          "uploadDate": "2015-02-05T08:00:00+08:00",
          "duration": "PT1M51S",
          "embedUrl": "https://www.youtube.com/watch?v=LDIYgpraBHA",
          "interactionCount": "2347"
        
</script>