如何在html的代码块中显示带有json内容的脚本标签？

Question

我想在一个代码示例块中显示一段动态生成的代码，用户可以突出显示一个副本。

内容会根据用户输入而改变，因此无法硬编码。

这是我想在块内显示的内容示例：

<script type="application/ld+json">{
  "name": "PBOV1 Is a Human De Novo Gene with Tumor-Specific Expression That Is Associated with a Positive Clinical Outcome of Cancer",
  "keywords": "pbov1, tumor-specific, cancer, Cancer, Evolutionary Biology, Immunology",
  "version": "1",
  "url": "https://figshare.com/articles/PBOV1_Is_a_Human_De_Novo_Gene_with_Tumor_Specific_Expression_That_Is_Associated_with_a_Positive_Clinical_Outcome_of_Cancer__/156778",
  "license": ""
}</script>

我正在使用 VueJS，这是正在进行的方法：

makeScript(){
  var str = JSON.stringify(this.metadata, null, 2);
  var script=document.createElement('script');
  script.type='application/ld+json';
  script.text = str;
  this.result = script;
  document.getElementById("resultCode").appendChild(script);
},

我试过“code”和“pre”，但它显示的只是脚本而已。我认为脚本正在编译并且没有显示为文本，我可能是错的......我希望这是有道理的。

输出到这里：

<div class="form-group">
  <pre >
    <code id="resultCode">
    </code>
  </pre>
</div>

Answer 1

这可以在 Vue 模板中使用 string interpolation 来完成。

1. 向您的组件添加一个数据属性（例如，名为“code”）。

     data() {
       return {
         code: ''
       }
     }
   

2. 编辑您的模板以插入该数据属性：

   <div class="form-group">
     <pre>
       <code id="resultCode">
         {{code}}
       </code>
     </pre>
   </div>
   

3. 将 data 属性设置为所需的原始 HTML（即您提到的 <script> 块）：

     methods: {
       setCode() {
         this.code = `
         <script type="application/ld+json">{
           "name": "PBOV1 Is a Human De Novo Gene with Tumor-Specific Expression That Is Associated with a Positive Clinical Outcome of Cancer",
           "keywords": "pbov1, tumor-specific, cancer, Cancer, Evolutionary Biology, Immunology",
           "version": "1",
           "url": "https://figshare.com/articles/PBOV1_Is_a_Human_De_Novo_Gene_with_Tumor_Specific_Expression_That_Is_Associated_with_a_Positive_Clinical_Outcome_of_Cancer__/156778",
           "license": ""
         }<\/script>
         `; // Must escape closing script tag
       }
     }
   

   注意此方法需要将结束 <script> 标记转义为 avoid a syntax error。

new Vue({
  el: '#app',
  data: () => ({
    code: '',
  }),
  mounted() {
    this.setCode();
  },
  methods: {
    setCode() {
      this.code = `<script type="application/ld+json">{
  "name": "PBOV1 Is a Human De Novo Gene with Tumor-Specific Expression That Is Associated with a Positive Clinical Outcome of Cancer",
  "keywords": "pbov1, tumor-specific, cancer, Cancer, Evolutionary Biology, Immunology",
  "version": "1",
  "url": "https://figshare.com/articles/PBOV1_Is_a_Human_De_Novo_Gene_with_Tumor_Specific_Expression_That_Is_Associated_with_a_Positive_Clinical_Outcome_of_Cancer__/156778",
  "license": ""
}<\/script>`;
    }
  }
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <div class="form-group">
    <pre><code>{{code}}</code></pre>
  </div>
</div>

Answer 2

1. 构造脚本元素。
2. 将其放入一个新的临时元素中。
3. 将 temp 元素的innerHTML 放入文本节点中。
4. 将该文本节点放入输出元素中。

function makeScript() {
  metadata = {
    "name": "PBOV1 Is a Human De Novo Gene with Tumor-Specific Expression That Is Associated with a Positive Clinical Outcome of Cancer",
    "keywords": "pbov1, tumor-specific, cancer, Cancer, Evolutionary Biology, Immunology",
    "version": "1",
    "url": "https://figshare.com/articles/PBOV1_Is_a_Human_De_Novo_Gene_with_Tumor_Specific_Expression_That_Is_Associated_with_a_Positive_Clinical_Outcome_of_Cancer__/156778",
    "license": ""
  }
  var str = JSON.stringify(metadata, null, 2);
  var script = document.createElement('script');
  script.type = 'application/ld+json';
  script.text = str;
  
  p = document.createElement('div');
  p.appendChild(script);
  text = document.createTextNode(p.innerHTML);
  
  document.getElementById("resultCode").appendChild(text);
}

makeScript();

<div class="form-group">
  <pre><code id="resultCode"></code></pre>
</div>