时间戳

首页 > 解决方案 > 有没有办法用变量替换 HTML 标签中的值并要求值来构造 html？

javascript - 有没有办法用变量替换 HTML 标签中的值并要求值来构造 html？

问题描述

1）假设，我的电子邮件模板如下所示：https ://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_cafe

我正在寻找一种解决方案，允许我在 HTML 代码中声明这样的变量：https ://www.w3schools.com/code/tryit.asp?filename=G2F7R2ICIWLW

在这个例子中，你可以看到，我提到了超链接源作为变量。：

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

文本也类似：

<p>@myrow1text</p>

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

标签： javascripthtml

解决方案

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

JsFiddle

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

JS：

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

推荐阅读