Javascript 有没有办法用变量替换HTML标记中的值，并要求值来构造HTML？

1） 比方说，我的电子邮件模板如下所示：

我正在寻找一种解决方案，允许我在HTML代码中声明如下变量：

在本例中，您可以看到，我提到了作为变量的超链接源：

<div class="w3-top">
  <div class="w3-row w3-padding w3-black">
    <div class="w3-col s3">
      <a href="@home" class="w3-button w3-block w3-black">HOME</a>
    </div>
    <div class="w3-col s3">
      <a href="@about" class="w3-button w3-block w3-black">ABOUT</a>
    </div>
    <div class="w3-col s3">
      <a href="@menu" class="w3-button w3-block w3-black">MENU</a>
    </div>
    <div class="w3-col s3">
      <a href="@where" class="w3-button w3-block w3-black">WHERE</a>
    </div>
  </div>
</div>

文本也类似：

@myrow1text

---

如何用JavaScript创建一个解决方案，在单独的文本框中询问HTML代码中定义的所有变量的值，然后当我输入所有值并单击SUBMIT按钮时，它给我完整的HTML和替换的值，这样我可以复制HTML代码并在任何地方使用它？

也许这个

插值

方法可以帮助你

（（）=>{
常量插值=（str，…tokenCollection）=>
tokenCollection&&tokenCollection[0]对象实例
？代币收集
.map（标记=>str）
.replace（/{[a-z_0-9]+}/gi，key=>
令牌[key.replace（/[{}]/g，“”]| | key））
：str；
const html=document.querySelector（#示例”）.innerHTML；
const createReplacement=（[home，about，menu，where]）=>
（{home，about，menu，where}）；
const replacements1=createReplacement（[“/home”、“/about”、“/menu”、“/where”]）；
const replacements2=createReplacement（[“/home2”、“/about2”、“/menu2”、“/where2”]）；
document.querySelector（#result”）.textContent=
插入（html，replacements1，replacements2）.join（“\n”）；
})（）

---

我创建了一个代码，但无法完成它。也许你，或者其他人可以解决最后一个问题

这里是包含多个（相同）变量的HTML@BUBU
创造
提交
在此处附加已创建的文本区域

JS:

document.getElementById（'create'）.addEventListener（'click'，function（）{
设E=document.getElementById（'ENTER'）；
让N=E.value.match（/@BUBU/g）.length；//获取变量的数量
对于（设i=0；i

您必须创建并呈现模板。检查一下这很好-到底是什么问题？我做了一个测试，看起来最后一个值被分配给了所有标签。

<textarea id="ENTER">Here your HTML with multiple (same) variables @BUBU</textarea>

<button id="create">Create</button>
<button id="submit">Submit</button>

<div id="content">Appending created textareas here</div>
<textarea id="result"></textarea>

document.getElementById('create').addEventListener('click',function(){
  let E = document.getElementById('ENTER');
  let N = E.value.match(/@BUBU/g).length; //getting the number of your variables

  for(let i = 0; i < N; i++){//creating N textareas with class="moo"
    let Z = document.createElement('textarea');
    Z.className = "moo";
    document.getElementById('content').appendChild(Z);
  }  
});

document.getElementById('submit').addEventListener('click',function(){
  let M = document.getElementsByClassName("moo");//getting created textareas
  let E = document.getElementById('ENTER');
  let x;
  for(let i = 0; i < M.length; i++){
    //here it must replace each @BUBU with entered value of area, but it doesn't
    x = E.value.replace(/@BUBU/ig,M[i].value);
  }    
  document.getElementById('result').value = x;   
});