How to Add Text Formatting to a Textarea using JavaScript?
Last Updated :
14 Nov, 2024
Improve
To add text formatting (such as bold, italic, or inserting special characters) to a <textarea> using JavaScript, you can manipulate the selected text or insert formatted text at the cursor position. This can be done by directly modifying the value of the <textarea> based on user interactions.
Example: Basic Text Formatting (Bold, Italic) in a Textarea
Here's how you can implement basic text formatting functions:
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Text Formatting</title>
</head>
<body>
<textarea id="myTextarea" rows="8" cols="50" placeholder="Type some text..."></textarea>
<br>
<button onclick="wrapText('**', '**')">Bold</button>
<button onclick="wrapText('*', '*')">Italic</button>
<button onclick="insertText('[Link text](url)')">Insert Link</button>
<script>
// Function to wrap selected text with start and end tags (e.g., for bold or italic formatting)
function wrapText(startTag, endTag) {
const textarea = document.getElementById('myTextarea');
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const text = textarea.value;
// Get the selected text
const selectedText = text.substring(start, end);
// Replace the selected text with formatted text
const formattedText = startTag + selectedText + endTag;
textarea.value = text.substring(0, start) + formattedText + text.substring(end);
// Reposition the cursor
textarea.selectionStart = start;
textarea.selectionEnd = start + formattedText.length;
// Focus back on the textarea
textarea.focus();
}
// Function to insert text at the cursor position
function insertText(textToInsert) {
const textarea = document.getElementById('myTextarea');
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const text = textarea.value;
// Insert the text at the cursor position
textarea.value = text.substring(0, start) + textToInsert + text.substring(end);
// Update cursor position
textarea.selectionStart = textarea.selectionEnd = start + textToInsert.length;
// Focus back on the textarea
textarea.focus();
}
</script>
</body>
</html>
Output:
Explanation
wrapText(startTag, endTag)Function:- This function wraps the selected text in the
<textarea>with specifiedstartTagandendTag. - For example, clicking the "Bold" button wraps the selected text with
**(Markdown-style bold formatting). - It preserves the cursor position after the text is modified.
- This function wraps the selected text in the
insertText(textToInsert)Function:- This function inserts text at the cursor position in the
<textarea>. - Useful for inserting links, special characters, or custom templates.
- This function inserts text at the cursor position in the
Example Usage
- Bold: Select text in the
<textarea>and click the "Bold" button to wrap the text with**(e.g.,**selected text**). - Italic: Select text in the
<textarea>and click the "Italic" button to wrap the text with*(e.g.,*selected text*). - Insert Link: Click the "Insert Link" button to insert a Markdown-style link at the cursor position.
Customizing Formatting Options
You can extend the example by adding more buttons or functions for other formatting options, such as:
- Underline: Wrap text with
<u>and</u>tags (or equivalent formatting). - Strikethrough: Use
~~for Markdown or<s>tags for HTML.
This approach gives you full control over text manipulation within a <textarea> element using JavaScript
