javascript - charAt 不适用于标签上的 jquery text() 但适用于简单的字符串

Question

我正在尝试使用 jQuery text() 获取获取的字符串的第一个字符。如果我用一个简单的硬编码字符串进行测试，它就会起作用:

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

但我无法使用 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>

我还用 substring() 和 slice() 进行了测试

你能给我解释一下哪里不起作用吗？

Answer 1

问题是因为 text() 中的字符串还包含 HTML 中的空格。您可以使用 trim() 删除它:

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>