0

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?

MHasan
  • 69
  • 1
  • 8
  • This [answer](https://stackoverflow.com/a/5122461/11719787) might help you – Sameer Jun 17 '20 at 02:29
  • how about it: https://stackoverflow.com/questions/5122402/uppercase-first-letter-of-variable – Chau Giang Jun 17 '20 at 02:30
  • 1
    Does this answer your question? [Uppercase first letter of variable](https://stackoverflow.com/questions/5122402/uppercase-first-letter-of-variable) – Nick Jun 17 '20 at 02:33

6 Answers6

3

A simple regex replace will get you there:

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

console.log(titleCase('hello world'));
Robby Cornelissen
  • 91,784
  • 22
  • 134
  • 156
1

You can use this simple css.

.text-capitalize {
      text-transform: capitalize;
 }
rvchauhan
  • 89
  • 8
0

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
Tri Bui Quang
  • 61
  • 6
0

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>
dale landry
  • 7,831
  • 2
  • 16
  • 28
0

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

Mario
  • 4,784
  • 3
  • 34
  • 50
0

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!

curious_guy
  • 398
  • 1
  • 7