如何使用 HTML<template> 帶變量（使用 Vanilla JS）

Question

目前我正在做以下事情：

這是我的 HTML 模板

<template id="catDisplayTemplate">
      <div class="col">
        <img class="mehow" src="{{catImg}}" alt="" data-name="{{catName}}" data-id="{{catId}}">
        <div class="row space-between">
          <div class="col">
            <p class="description">{{catDescription}}</p>
          </div>
       </div>
       </div>
</template>

以下代碼更改了胡須，但感覺像是在重復自己

const catTemplate = document.querySelector('#catDisplayTemplate').innerHTML;
catTemplate = catTemplate.replace(/{{catImg}}/g, catData.img);
catTemplate = catTemplate.replace(/{{catName}}/g, catData.name);
catTemplate = catTemplate.replace(/{{catId}}/g, catData.id);
catTemplate = catTemplate.replace(/{{catDescription}}/g, catData.description);

*catData 是包含詳細信息的對象。

有沒有更好的/其他方式？

Answer 1

您可以編寫一個內插函數，該函數接受模板和一個包含要替換的鍵和值的對象。 這個問題的答案中有幾個例子： ES6 模板文字能否在運行時被替換（或重用）？

這是我使用的一個，我從 這里借來的：它清理輸入以防止 XSS 攻擊並用變量替換占位符。 我可能會將其拆分為單獨的功能以供生產使用。

interpolate(template, params) {
    const replaceTags = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '(': '%28', ')': '%29' };
    const safeInnerHTML = text => text.toString().replace(/[&<>\(\)]/g, tag => replaceTags[tag] || tag);
    const keys = Object.keys(params);
    const keyVals = Object.values(params).map(safeInnerHTML);
    return new Function(...keys, `return \`${template}\``)(...keyVals);
 }

你會像這樣使用它：

const template = document.querySelector('myTemplate')
const data = { name: 'John Doe', age: 25}    
someDiv.innerHTML = interpolate(template.innerHTML.toString().trim(), data)