How to Use JQuery to Capitalize the First Letter of Every Word in a Sentence

Question

How to Use JQuery to Capitalize the First Letter of Every Word in a Sentence

How can I capitalize the first letter of each word in a text field using JQuery? I've been struggling to achieve this.

Here is the Bootstrap code that I'm currently using to extract data from a text field when a button is submitted

<button class="btn btn-primary" type="button" id="btn4" value="alternatingCase">Alternating Case</button>

The following JQuery code only converts the first letter of the paragraph to uppercase:

$("#btn4").click(function(){
  var input = $("#input1");
  input.val(input.val().charAt(0).toUpperCase() + input.val().substr(1).toLowerCase());
  });

javascript jquery css bootstrap-5

Answer 1

Answer №1

You appear to be interested in capitalizing each word.

$("#btn4").click(function() {
  // create an array by splitting the input value
  let words = $("#input1").val().split(' ').map((word) => {
   // capitalize the first letter of each word and convert the rest to lowercase
   return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
  })
   // join the words back together to form a string
  $("#input1").val(words.join(' '))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input1">
<button class="btn btn-primary" type="button" id="btn4" value="alternatingCase">Alternating Case</button>

Answer 2

You appear to be interested in capitalizing each word.

$("#btn4").click(function() {
  // create an array by splitting the input value
  let words = $("#input1").val().split(' ').map((word) => {
   // capitalize the first letter of each word and convert the rest to lowercase
   return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
  })
   // join the words back together to form a string
  $("#input1").val(words.join(' '))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input1">
<button class="btn btn-primary" type="button" id="btn4" value="alternatingCase">Alternating Case</button>

How to Use JQuery to Capitalize the First Letter of Every Word in a Sentence

Answer №1

Similar questions

incapable of modifying the contents of an array

Is it possible to use two mergeMap operators concurrently in RxJs?

Transform List Elements into Interactive jQuery Toggles with Dynamic Functionality

I'm encountering an error in my routes index.js file that says "Module not found"

Is there a way to switch my image buttons to a different image when clicked?

Locate a piece of text with jQuery and enclose it within a specified container

The functionality of event bubbling appears to be ineffective while utilizing a bootstrap modal in an AngularJS application

Is there a way to simultaneously view and send this JSON data to the server using console.log?

Substitute regular expressions with several occurrences by their respective capture groups

Scanning barcode and Qrcode with Angular js HTML5 for seamless integration

having difficulty choosing a particular identifier from a JSON string

An empty image placeholder was placed on the page using jQuery

Switch between different classes with JavaScript

The art of replacing material-ui styles with styled components

Merging arrays with the power of ES6 spread operator in Typescript

Creating a unique custom theme for Twitter Bootstrap at 1200px and 980px screen sizes

Choose all checkboxes across the entire webpage

Manipulating the DOM within an Angular application

Transmitting JSON information using post method through .ajax(), as well as receiving a JSON reply

Successive, Interrelated Delayed Invocations