JavaScript로 HTML 생성기를 만드는 방법은 무엇입니까?

Before you proceed: This post is not about creating a safe or the best HTML generator rather it's just something for fun that you can try by using template literals in JavaScript. It was a fun experiment for me.

유사한 HTML을 여러 줄 작성하는 데 지친 적이 있습니까? 그렇다면 JavaScript에서 템플릿 리터럴을 사용하여 프로세스를 자동화할 수 있습니다. 어떻게 할 수 있는지 봅시다.

실제로 하이퍼링크인 상자가 여러 개 있고 그 중 여러 개를 만들고 싶다고 가정해 보겠습니다.



한 가지 방법은 HTML 코드를 복사하여 붙여넣고 코드의 특정 섹션을 변경하는 것입니다. 이 접근 방식은 소규모 프로젝트에 적합하지만 프로젝트가 충분히 크면 엉망이 될 수 있습니다.

또는 JavaScript에서 template literals를 사용하여 HTML 코드를 생성하는 고유한 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>

자바스크립트

generate() 라는 함수를 생성합니다. 이 함수에는 title , url 및 tag 의 세 가지 매개변수가 있습니다. 필드에 입력한 title , url 및 tag 의 값을 인수로 가져옵니다.

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

이 모든 작업은 사용자가 생성 버튼을 클릭한 후에 발생하므로 여기에 eventListener를 추가해 보겠습니다.

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 개발자로서의 삶을 쉽게 만들어줍니다.

종료합니다.