How to Add Text Formatting to a Textarea using JavaScript?

Last Updated : 14 Nov, 2024

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

HTML

<!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:

Screenshot-2024-11-14-130149 — Bold Text

Screenshot-2024-11-14-130201 — Italic Text

Screenshot-2024-11-14-130211 — Inserting Link

Explanation

wrapText(startTag, endTag) Function:
- This function wraps the selected text in the <textarea> with specified startTag and endTag.
- 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.
insertText(textToInsert) Function:
- This function inserts text at the cursor position in the <textarea>.
- Useful for inserting links, special characters, or custom templates.

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