Tool Link:
https://jsfiddle.net/zf5cnx7t/
Creating a Text to HTML Converter
This article will guide you through creating a simple yet powerful web-based Text to HTML converter using HTML, CSS, and JavaScript. This converter takes user input in plain text and converts it into HTML format. The converter also includes a feature to copy the converted HTML to the clipboard. Let’s break down the code and understand how it works.
HTML Structure
#
1. Basic HTML Setup
We start with a basic HTML template:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text to HTML Converter</title>
<style>
/* CSS goes here */
</style>
</head>
<body>
<!-- HTML content goes here -->
<script>
// JavaScript goes here
</script>
</body>
</html>
#
2. Adding Text Areas and Buttons
Inside the <body> tag, we add two <textarea> elements for input and output, and two buttons for converting text and copying to the clipboard:
html
<body>
<textarea id="input" placeholder="Enter your text here..."></textarea>
<br>
<button onclick="convertText()">Convert to HTML</button>
<br>
<textarea id="output" readonly></textarea>
<br>
<button onclick="copyToClipboard()">Copy</button>
</body>
Styling with CSS
To make the text areas and buttons look better, we add some basic CSS:
css
<style>
#input, #output {
width: 100%;
height: 200px;
margin-bottom: 10px;
}
button {
margin-top: 10px;
}
</style>
JavaScript for Conversion and Copying
Now, let's dive into the JavaScript that makes the conversion and copying functionality work.
1. Convert Text to HTML
The convertText function retrieves the text from the input textarea, processes it to convert specific markdown-like syntax to HTML, and outputs the result in the output textarea:
javascript
<script>
function convertText() {
const inputText = document.getElementById('input').value;
const outputTextarea = document.getElementById('output');
let htmlText = inputText
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/
/g, '<pre><code class="csharp">')
.replace(//g, '</code></pre>')
.replace(/([^]+)/g, '<code>$1</code>')
.replace(/
(.*)/g, '<h2>$1</h2>')
.replace(/
(.*)/g, '<h1>$1</h1>')
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // Convert bold text
.replace(/\n\n/g, '</p><p>')
.replace(/\n/g, '<br>');
// Wrap the entire text in paragraph tags if not already wrapped
if (!htmlText.startsWith('<p>')) {
htmlText = <p>${htmlText}</p>;
}
outputTextarea.value = htmlText;
}
</script>
#
2. Copy to Clipboard
The copyToClipboard function allows users to copy the converted HTML to their clipboard:
javascript
<script>
function copyToClipboard() {
const textarea = document.getElementById('output');
textarea.select();
document.execCommand('copy');
alert('Text copied to clipboard');
}
</script>
Full Code
Here is the complete code with HTML, CSS, and JavaScript combined:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text to HTML Converter</title>
<style>
#input, #output {
width: 100%;
height: 200px;
margin-bottom: 10px;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<textarea id="input" placeholder="Enter your text here..."></textarea>
<br>
<button onclick="convertText()">Convert to HTML</button>
<br>
<textarea id="output" readonly></textarea>
<br>
<button onclick="copyToClipboard()">Copy</button>
<script>
function convertText() {
const inputText = document.getElementById('input').value;
const outputTextarea = document.getElementById('output');
let htmlText = inputText
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/
/g, '<pre><code class="csharp">')
.replace(//g, '</code></pre>')
.replace(/([^]+)/g, '<code>$1</code>')
.replace(/
(.*)/g, '<h2>$1</h2>')
.replace(/
(.*)/g, '<h1>$1</h1>')
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // Convert bold text
.replace(/\n\n/g, '</p><p>')
.replace(/\n/g, '<br>');
// Wrap the entire text in paragraph tags if not already wrapped
if (!htmlText.startsWith('<p>')) {
htmlText = <p>${htmlText}</p>;
}
outputTextarea.value = htmlText;
}
function copyToClipboard() {
const textarea = document.getElementById('output');
textarea.select();
document.execCommand('copy');
alert('Text copied to clipboard');
}
</script>
</body>
</html>
With this code, you now have a functional Text to HTML converter that allows users to input text, convert it to HTML, and copy the converted HTML to the clipboard. This can be particularly useful for developers and writers who need a quick way to convert plain text to HTML for use in web pages and other HTML-based documents.
