charAt don't work with jquery text() on label but works with simple string

June 7, 2022

I’m trying to get the first character of a fetched string with jQuery text(). It works if I test with a simple hard-coded string:

var str = 'hello';
var first_char = str.charAt(0);
console.log('first_char : ' + first_char);

But I can’t do it with the text of a label retrieved with text()

var str = $('.form-item-field-lorem-433 label').text();
console.log('str : ' + str);
var first_character = str.charAt(0);
console.log('first_character : ' + first_character);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-item-field-lorem-433">
  <input data-drupal-selector="edit-field-lorem-433" type="checkbox" id="edit-field-lorem-433" name="field_lorem[433]" value="433" class="form-checkbox form-check-input">
  <label class="form-check-label" for="edit-field-lorem-433">
        Asie-Pacifique
      </label>
</div>

I also tested with substring() and slice()

Can you explain to me what is not working?

>Solution :

The issue is because the string from text() also contains the whitespace from the HTML. You can use trim() to remove this:

var str = $('.form-item-field-lorem-433 label').text().trim(); // trim here
console.log('str : ' + str);

var first_character = str.charAt(0);
console.log('first_character : ' + first_character);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-item-field-lorem-433">
  <input data-drupal-selector="edit-field-lorem-433" type="checkbox" id="edit-field-lorem-433" name="field_lorem[433]" value="433" class="form-checkbox form-check-input">
  <label class="form-check-label" for="edit-field-lorem-433">
    Asie-Pacifique
  </label>
</div>