如何使用jQuery获取文本中每个单词的首字母

架构老林

2026-10-2

姓名多单词首字母提取实现方案

你现有代码的问题是两次读取的都是完整的姓名字符串，调用charAt(0)取到的都是第一个单词的首字母，拼接后会输出两个重复字符，不符合需求，可按以下方案修改：

实现逻辑

先对读取到的姓名文本做首尾去空格处理，避免边界空格干扰
用正则按空格分割姓名为单词数组，自动过滤姓名中间多个连续空格的异常情况
遍历单词数组提取每个单词的首字母，可根据需求选择提取全部首字母，或仅提取前两个首字母适配圆形头像展示

可直接复用的修改后代码

JavaScript 部分

$('.testimonial-box').each(function(){
    // 读取姓名并去除首尾多余空格
    const clientName = $(this).find('.client-name').text().trim();
    // 按任意数量空格分割为单词数组
    const nameWordList = clientName.split(/\s+/);
    let nameInitials = '';

    // 写法1：提取所有单词的首字母，示例效果：Vipin Kumar Verma → VKV
    nameWordList.forEach(word => {
        nameInitials += word.charAt(0);
    });

    // 写法2：仅提取前两个单词的首字母，示例效果：Vipin Kumar Verma → VK，需要时替换上面的遍历逻辑即可
    // nameInitials = nameWordList[0].charAt(0) + (nameWordList[1] ? nameWordList[1].charAt(0) : '');

    $(this).find('.img-circle').text(nameInitials);
});