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

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!

CodePudding user response：

$('.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>

CodePudding user response：

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".