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

Question

I want to display a chunk of code generated dynamically inside a code example block that users can highlight a copy.

The content will change based on user input so it cannot be hardcoded.

This is an example of the content I would like to display inside the block:

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

I'm using VueJS and this is the method in progress:

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);
},

I've tried "code" and "pre" and all it shows is nothing but the script is there. I think the script is getting compiled and not shown as text, I could be wrong.... I hope that makes sense.

output goes here:

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

Answer 1

This can be done with string interpolation in a Vue template.

1. Add a data property (eg, named " code ") to your component.

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

2. Edit your template to interpolate that data property:

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

3. Set the data property to the desired raw HTML (ie, the <script> block you mentioned in question):

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

   Note this method requires escaping the closing <script> tag to 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. Construct the script element.
2. Put it in a new, temporary element.
3. Put the innerHTML of the temp element into a text node.
4. Put that text node into the output element.

 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>