如何在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 模板中的字符串插值來完成。

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>標記以避免語法錯誤。

 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>