Easy Fast Letter Case Converter In jQuery

File Size: 5.46 KB
Views Total: 297
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Fast Letter Case Converter In jQuery

Do you need to change your text from uppercase to lowercase or maybe vice versa, or change it from Title Case and switch it to Sentence case? The Easy Fast Letter Case Converter is a useful tool that lets you do that in the best possible way with just a few clicks.

This jQuery-based online tool allows you to quickly and easily convert text between different letter cases like lower case, UPPER CASE, Title case, Capitalized Case, and more online.

How to use it:

1. Create an HTML form for the online case converter.

<form action="#">

  <!-- Input -->
  <label for="input-text">Your Text</label>
  <textarea id="input-text" placeholder="Type or paste text here..." name="input-text"></textarea>

  <!-- Output -->
  <div id="textarea-result">
    <label for="formatted-text">Result</label>
    <textarea id="formatted-text" name="formatted-text" readonly></textarea>
  <div id="div-result" style="display:none;">
    <label for="formatted-text">Result</label>
    <div id="formatted-text-div" name="formatted-text-div"></div>

  <!-- Remove Multiple Spaces -->
  <input type="checkbox" class="form-check-input" id="rem-multi-space" name="rem-multi-space" value="1" checked>
  <label for="rem-multi-space">Remove Multiple Spaces</label>

  <!-- Buttons -->
  <a href="#" id="title-case" title="E.g. 'hello ablie'=> 'Hello Ablie'">Title Case</a>
  <a href="#" id="capitalize-case" title="E.g. 'ousman kasman'=> 'Ousman Kasman'">Capitalize Case</a>
  <a href="#" id="lower-case" title="E.g. 'HELLO is HI'=> 'hello is hi'">Lower Case</a>
  <a href="#" id="upper-case" title="E.g. 'Salam is peace'=> 'SALAM IS PEACE'">Upper Case</a>
  <a href="#" id="bold-text" title="Format text to bold case">Bold Text</a>
  <a href="#" id="strike-through" title="Format text to strikethrough text">Strikethrough</a>
  <a href="#" id="underline-text" title="Convert text to underline text">Underline Text</a>

  <!-- Copy Buttons -->
  <a href="#" class="text-area-copy" data-clipboard-target="#formatted-text">
  <a href="#" class="div-copy" data-clipboard-target="#formatted-text-div" style="display:none;">

2. Load jQuery library and the Case Converter's JavaScript in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/assets/js/script.js"></script> 

3. Enable the Copy button to copy the text into the clipboard.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
var clipboard = new ClipboardJS('.copy-btn');

This awesome jQuery plugin is developed by akassama. For more Advanced Usages, please check the demo page or visit the official website.