CODEWITHSUNDEEP
javascriptjqueryformsuppercasecapitalize
MHasan
MHasan

Reputation: 69

jquery capitalize first letter of each word

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?

Upvotes: 0

Views: 3239

Answers (6)

rvchauhan
rvchauhan

Reputation: 89

You can use this simple css.

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

Upvotes: 1

dale landry
dale landry

Reputation: 8610

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>

Upvotes: 0

Mario
Mario

Reputation: 4998

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

Upvotes: 0

curious_guy
curious_guy

Reputation: 398

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!

Upvotes: 0

Robby Cornelissen
Robby Cornelissen

Reputation: 97331

A simple regex replace will get you there:

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

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

Upvotes: 4

Tri Bui Quang
Tri Bui Quang

Reputation: 59

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

Upvotes: 0

Related Questions