从自身内部替换页面上的占位符

Question

具有一个模板页面，该页面必须用数据源中的值重新填充。我不知道该怎么做。页面html的摘录： ...

<td colspan="2">
<strong>QUOTATION [ID]</strong><br>
[Organisation_Details]</td>
</tr>
<tr>
<td colspan="2">
<b>Client:</b><br>
[Client]<br>

...

所以我必须在这里替换[ID]和[Client]，什么是最好的方法？

Answer 1

请参见以下示例。填充占位符。

var d=document.getElementById('dataToChange').innerText;
    var placeHolders=['[ID]','[Organisation_Details]','[Client]'];
    var valuesForplaceHolders=[1,'Google','youTube'];
    for(var i=0;i<placeHolders.length;i++){
      d=d.replace(placeHolders[i],valuesForplaceHolders[i])
    }
    console.log(d)
 document.getElementById('dataToChange').innerText=d;

<div id='dataToChange'>
<td colspan="2">
<strong>QUOTATION [ID]</strong><br>
[Organisation_Details]</td>
</tr>
<tr>
<td colspan="2">
<b>Client:</b><br>
[Client]<br></div>

Answer 2

用<span id="{ID_HERE}"></span>替换变量，并为其指定特定的ID。然后，您可以使用基本的JS值填充这些值。

但是，我强烈建议您使用模板库，例如Handlebars。