Converting Plain Text To Encoded HTML With Vanilla JavaScript

바닐라 자바스크립트를 사용하여 일반 텍스트를 인코딩된 HTML로 변환

What do you do when you need to convert plain text into formatted HTML? Perhaps you reach for Markdown or manually write in the element tags yourself. Or maybe you have one or two of the dozens of online tools that will do it for you. In this tutorial, Alexis Kypridemos picks those tools apart and details the steps for how we can do it ourselves with a little vanilla HTML, CSS, and JavaScript.

일반 텍스트를 형식화된 HTML로 변환하려면 어떻게 해야 할까요? 아니면 직접 마크다운을 누르거나 요소 태그에 수동으로 글을 쓸 수도 있습니다. 아니면 수십 개의 온라인 도구 중 하나나 두 개를 가지고 있을 수도 있습니다. 이 튜토리얼에서 알렉시스 키프리데모스는 이러한 도구들을 분리하여 바닐라 HTML, CSS 및 자바스크립트를 사용하여 직접 수행할 수 있는 방법에 대해 자세히 설명합니다.

요약 :)

일반 텍스트를 서식 있는 HTML로 변환해야 할 때 어떻게 합니까? 아마도 Markdown을 사용하거나 수동으로 요소 태그를 직접 작성할 수도 있습니다. 아니면 수십 개의 온라인 도구 중 하나 또는 두 개를 사용하여 해당 작업을 수행할 수도 있습니다. 이 튜토리얼에서 Alexis Kypridemos는 이러한 도구를 선별하고 약간의 바닐라 HTML, CSS 및 JavaScript를 사용하여 직접 수행할 수 있는 단계를 자세히 설명합니다.

더보기→

출처.
Alexis Kypridemos. (2024.04.17). Smashing Magazine. Converting Plain Text To Encoded HTML With Vanilla JavaScript. 2024.04.22. https://www.smashingmagazine.com/2024/04/converting-text-encoded-html-vanilla-javascript/

목록으로

웹사이트에서 기기의 클립보드로 텍스트를 복사할 때 붙여넣을 때 형식이 지정된 HTML을 얻을 가능성이 높습니다. 일부 앱과 운영 체제에는 현재 스타일을 유지하기 위해 해당 태그를 제거하는 "선택하여 붙여넣기" 기능이 있지만, 이를 사용할 수 없으면 어떻게 합니까? 일반 텍스트를 형식화된 HTML로 변환하는 경우에도 마찬가지입니다. 일반 텍스트를 HTML로 변환할 수 있는 가장 가까운 방법 중 하나는 Markdown을 추상화로 작성하는 것입니다. 이와 같은 기사의 다양한 댓글 양식에서 이에 대한 예를 본 적이 있을 것입니다. Markdown으로 주석을 작성하면 HTML로 구문 분석됩니다. 추상화가 전혀 없는 것이 더 좋습니다! 또한 일반 텍스트를 HTML 형식으로 변환하는 다양한 온라인 도구를 보거나 사용했을 수도 있습니다. UI는 변환을 수행하고 형식화된 결과를 실시간으로 미리 봅니다. 사용자가 HTML에 대해 전혀 모르는 상태에서 주석과 같은 기본 웹 콘텐츠를 작성할 수 있는 방법을 제공하는 것은 웹에서의 의사소통 및 공동 작업에 대한 장벽을 낮추는 새로운 추구입니다. 웹을 "민주화"하는 데 도움이 된다고 말하는 것은 부담스러울 수 있지만 그 비전과 충돌하지는 않습니다! 기사 마지막 부분에 표시되는 스매싱 매거진 댓글 양식입니다. 댓글을 남기라는 내용과 마크다운 형식 지정 및 양식 텍스트 영역에 대한 지침이 나옵니다. Smashing Magazine의 댓글 양식에는 Markdown 구문으로 댓글 형식을 지정하는 지침이 포함되어 있습니다. ( 큰 미리보기 ) 우리는 이와 같은 도구를 직접 만들 수 있습니다. 나는 가능한 경우 기존 리소스를 사용하는 데 동의하지만 이러한 작업이 어떻게 작동하는지 보여주고 그 과정에서 새로운 것을 배우는 것도 좋아합니다. 범위 정의 # 일반 텍스트를 HTML로 변환하는 데에는 많은 가정과 고려 사항이 있습니다. 예를 들어, 도구에 입력된 텍스트의 첫 번째 줄이 해당

태그가 필요한 제목이라고 가정해야 할까요? 각각의 새 줄은 실제로 단락이며 콘텐츠 연결이 이에 어떻게 적합합니까? 다시 말하지만, 사용자는 마크다운이나 HTML 구문을 몰라도 글을 쓸 수 있어야 한다는 생각입니다. 이는 큰 제약이며 우리가 접할 수 있는 HTML 요소가 너무 많기 때문에 콘텐츠가 사용되는 컨텍스트를 아는 것이 좋습니다. 예를 들어 이것이 블로그 게시물 작성을 위한 도구인 경우 긴 형식의 콘텐츠에서 일반적으로 사용되는 요소

( ,
, 및 ) 를 기반으로 지원되는 요소의 범위를 제한할 수 있습니다 . 즉, 최상위 제목, 본문 텍스트, 링크 텍스트, 이미지 등을 포함하는 것이 가능해질 것입니다. 이 특정 도구에서는 글머리 기호 목록이나 순서가 지정된 목록, 표 또는 기타 요소가 지원되지 않습니다. 프런트 엔드 구현은 바닐라 HTML, CSS 및 JavaScript를 사용하여 텍스트를 HTML로 변환하는 간단한 레이아웃과 기능을 갖춘 작은 양식을 구축합니다. 프로덕션 환경에 배포하려는 경우 서버 측 측면이 있지만 우리의 초점은 순전히 프런트 엔드입니다. 동영상 재생 TypeScript에 대한 새로운 가이드인 "50개 강의의 TypeScript"를 만나보세요 . 자세한 코드 연습 , 실습 예제 및 일반적인 문제가 포함되어 있습니다. 위험할 만큼 JavaScript를 충분히 아는 개발자를 위한 것입니다 . 목차로 이동 ↬ 기능 패널 기존 솔루션 살펴보기 # 이를 달성하기 위한 기존 방법이 있습니다. 예를 들어 일부 라이브러리에서는 WYSIWYG 편집기를 제공합니다. TinyMCE 와 같은 라이브러리를 싱글로 가져오면