如何使用 JavaScript 创建 HTML 生成器？

继续之前：这篇文章并非关于如何创建一个安全或最佳的 HTML 生成器，而只是一些有趣的小实验，你可以尝试在 JavaScript 中使用模板字面量。对我来说，这是一个有趣的实验。

你是否厌倦了编写多行雷同的 HTML 代码？如果是这样，那么你可以在 JavaScript 中使用模板字面量来自动化这个过程。让我们看看如何做到这一点。

假设您有多个实际上是超链接的框，并且您想要创建多个这样的框。

一种方法是直接复制粘贴 HTML 代码，然后修改代码的特定部分。这种方法对于小型项目来说可能有效，但如果项目规模足够大，就会变得一团糟。

或者，您可以使用 JavaScript 创建自己的 HTML 生成器template literals，它将为您生成 HTML 代码！

JavaScript 中的模板字符串

JavaScript 中的模板字面量其实就是字符串字面量，它允许你将各种表达式嵌入到字符串中。它们被反引号括起来。嵌入表达式的语法如下：



let string = `first part of the string ${expression} second part of the string`;

现在，让我们创建 HTML 生成器。

为链接 URL、标题和标签创建相应的输入字段。您也可以根据需要添加自己的输入字段。



<div id="contains">
      <label for="title" class="title">Title</label>
      <input type="text" id="title" name="title">
      <label for="url" class="url">URL</label>
      <input type="url" id="url" name="url">
      <label for="tag" class="tag">Tag</label>
      <input type="text" id="tag" name="tag">
      <button id="submit">Generate</button>
</div>

接下来，创建一个textarea显示结果代码的字段，并创建一个按钮将代码复制到剪贴板。



<div class="result">
      <textarea class="result_text" type="text" rows="5"></textarea>
      <button class="copy_btn"><i class="fas fa-clipboard"></i></button>
</div>

JavaScript

我们将创建一个名为的函数generate()。此函数有三个参数—— title、url和。它将接受我们在字段中输入的、和的tag值作为参数。titleurltag



function generate(title, url, tag){
   //code
}

接下来，我们将使用模板字面量，并将title、url和tag嵌入到字符串中。然后，将字段的值设置result为生成的字符串。



let title = document.querySelector("#title");
let url = document.querySelector("#url");
let tag = document.querySelector("#tag");
let result = document.querySelector(".result_text");

function generate(title, url, tag){
    let final_string = `<a href="${url}"><div class="link"><div class="banner">${tag}</div>${title}</div></a>`;
    result.value = final_string;
}

所有这些都将在用户单击生成按钮后发生，因此让我们为其添加一个事件监听器。



let submit_btn = document.querySelector("#submit");
submit_btn.addEventListener("click", () => {
    generate(title.value, url.value, tag.value);
    title.value = "";
    url.value = "";
    tag.value = "";
});

为了从中复制代码textarea，我们可以定义一个名为的函数copy()，然后在用户点击“复制到剪贴板”按钮时调用该函数。



let copy_btn = document.querySelector(".copy_btn");
copy_btn.addEventListener("click", () => {
    copy();
})
function copy(){
    result.select();
    document.execCommand("copy");
}

这是一个快速演示：

现在，您可以将代码复制到主项目中。
这只是模板字面量的用例之一。在 JavaScript 中使用模板字面量可以做很多事情。它们可以简化 JavaScript 开发者的工作。

签字。

文章来源：https://dev.to/murtuzaalisurti/how-to-create-an-html-generator-with-javascript-gdg