jquery capitalize first letter of each word

Question

I have an issue in jquery. i want to do capitalize first letter of each word in input fields.

mycode:

function capitalize(){
        console.log($('#alertmsg').val().trim());
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

         <label for="alertmsg"><b>Alert Message</b></label>
         <input type="text" name="alertmsg" id="alertmsg" >
         <button onClick="capitalize()"> click </button>

jquery

        console.log($('#alertmsg').val().trim()); //Hello world

what should i do..anyone help me?

Answer 1

A simple regex replace will get you there:

const titleCase = (s) => s.replace(/\b\w/g, c => c.toUpperCase());

console.log(titleCase('hello world'));

Answer 2

you should try this:

function titleCase(str) {
   var splitStr = str.toLowerCase().split(' ');
   for (var i = 0; i < splitStr.length; i++) {
       // You do not need to check if i is larger than splitStr length, as your for does that for you
       // Assign it back to the array
       splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
   }
   // Directly return the joined string
   return splitStr.join(' '); 
}

And then

console.log(titleCase("hello world")); //Hello World

Answer 3

Based on the answer by @Robby Cornelissen:

Below code will do the following:

• take the value from the input field
• update the first char of each word to uppercase
• finally, update the field with the updated value

function capitalize(){
  const titleCase = (s) => s.replace(/\b\w/g, c => c.toUpperCase());
  const updatedValue = titleCase($('#alertmsg').val().trim());
  $('#alertmsg').val(updatedValue);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<label for="alertmsg"><b>Alert Message</b></label>
<input type="text" name="alertmsg" id="alertmsg" >
<button onClick="capitalize()"> click </button>

Hope this helps!

Answer 4

Please try the following example

const string = 'hello world'

function capitalize(string) {
  const words = string.split(' ');
  const output = words.map(word => {
    const firstLetter = word.substring(0, 1).toUpperCase();
    const rest = word.substring(1);  

    return `${firstLetter}${rest}`
  })

  return output.join(' ')
}

console.log(capitalize(string))

See

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring

Answer 5

EDIT: Important to read the question in detail before posting an answer ;)

My post may be a bit convoluted but it works...

Split the value using the spaces, then run each value of the split array through a forEach loop, find the index of [0] for the value string and change that to upper case. Then concatenate the rest of the string to the first uppercase letter.

For display, concatenate each value of the forEach back into a string with a space. Trim to remove the trailing and/or leading spaces.

let $val = $('#alertmsg');
let $display = $('#display');
let values;
let output;
$val.blur(function(value) {
  let a = '';
  values = $val.val().trim().split(' ')
  values.forEach(function(v, i) {
    output = '';
    for (let n = 0; n < v.length; n++) {
      if (n === 0) {
        output += v[n].toUpperCase();
      } else {
        output += v[n];
      }
    }
    a += ' ' + output;
  })
  console.log(a.trim())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="alertmsg"><b>Alert Message</b></label>
<input type="text" name="alertmsg" id="alertmsg">
<p id="display"></p>

Answer 6

You can use this simple css.

.text-capitalize {
      text-transform: capitalize;
 }