How can I get first letter of each word in Jquery?

Question

I have multiple Names & I want to get first letter or each word. How can I do this?

My Code:-

 $('.testimonial-box').each(function(){ let clientNameFirstLetter = $(this).find('.client-name').text(); let clientNameSecondLetter = $(this).find('.client-name').text(); let clientNameBothLetters = clientNameFirstLetter.charAt(0) + clientNameSecondLetter.charAt(0); $(this).find('.img-circle').text(clientNameBothLetters); });

 .testimonial-sectiioin{ display:flex; gap:45px;}.testimonial-sectiioin.testimonial-box.img-circle { width: 100px; height: 100px; background: #ccc; border-radius: 50%; font-size: 55px; font-family: proximaNovaBold; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="testimonial-sectiioin"> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Rohit Verma</p> </div> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Vipin Kumar Verma</p> </div> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Neha Aggarwal</p> </div> </section>

ThankYou!

Answer 1

 $('.testimonial-box').each(function(){ // Get client name let clientName = $(this).find('.client-name').text(); // Create an array with words inside the name let splittedName = clientName.split(' '); // Now let's loop all words and save the first letter var name = '' splittedName.forEach(n => { name += n[0] }) // Set name to current image circle $(this).find('.img-circle').text(name); });

 .testimonial-sectiioin{ display:flex; gap:45px;}.testimonial-sectiioin.testimonial-box.img-circle { width: 100px; height: 100px; background: #ccc; border-radius: 50%; font-size: 55px; font-family: proximaNovaBold; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="testimonial-sectiioin"> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Rohit Verma</p> </div> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Vipin Kumar Verma</p> </div> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Neha Aggarwal</p> </div> </section>

Answer 2

You can use split to split the text based on the space. So you will get your first name and second name.

So you can take the first letters of both words. Easy.

If you have more than 2 words in the name, you can use a map/forEach to get each letter's.

 $('.testimonial-box').each(function(){ let clientName = $(this).find('.client-name').text(); let clientNameBothLetters = clientName.split(" ")[0][0] + clientName.split(" ")[clientName.split(" ").length - 1][0]; $(this).find('.img-circle').text(clientNameBothLetters); });

 .testimonial-sectiioin{ display:flex; gap:45px;}.testimonial-sectiioin.testimonial-box.img-circle { width: 100px; height: 100px; background: #ccc; border-radius: 50%; font-size: 55px; font-family: proximaNovaBold; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="testimonial-sectiioin"> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Rohit Verma</p> </div> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Vipin Kumar Verma</p> </div> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Neha Aggarwal</p> </div> </section>

EDIT

As per the request, the snippet updated in a way that only two letters will be shown in the img-circle . So for "Vipin Kumar Verma", it will be "VV".