Jquery - получить первый символ слова после пробела

Question

Используется ниже HTML & JS для получения первого символа строки и отображения. Вручную можно вычислить и получить значение.

Когда он переходит в динамику c и имя только с именем и фамилией, не уверен, как рассчитать позицию символа после пробела и получить первый символ слова.

$('.splitname .fname').html(name.charAt(0));
$('.splitname .mname').html(name.charAt(8));
$('.splitname .lname').html(name.charAt(16));

<div class="name">Desmond Patrick Reymond</div>

<div class="splitname">
    <span class="fname">D</span>
    <span class="mname">P</span>
    <span class="lname">R</span>
</div>

Answer 1

Используйте этот logi c:

"Desmond Patrick Reymond".split(" ").map(name => name[0])
// => ["D", "P", "R"]

Если вам нужно изменить HTML программно, выполните:

let s = $('.name').text();
s.split(" ").map(name => $('.splitname').append(name[0]))

(Это не очень хорошая практика использовать map для побочных эффектов; вместо этого вы можете использовать forEach.)

Answer 2

Вы можете использовать Array#split, Array#map и Array#join, как в демонстрации ниже. Результат будет:

<div class="splitname">
    <span class="fname">D</span>
    <span class="mname">P</span>
    <span class="lname">R</span>
</div>

//Classes for the initials
const classes = ['fname', 'mname', 'lname'];
//Where to put the initials
$('.splitname')
    //make HTML generated content of
    .html(
        //Get Full Name
        $('.name').text()
        //Break into names array
        .split(' ')
        //Get initial of each name
        .map(name => name.charAt(0))
        //Wrap each initial in a span element
        .map((initial,index) => `<span class="${classes[index]}">${initial}</span>`)
        //Join all span elements array into string
        .join('')
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">Desmond Patrick Reymond</div>

<div class="splitname"></div>

Answer 3

Вы можете просто использовать функцию match () и простой ReGex, чтобы получить динамические c текстовые данные с spaces без необходимости проверять charAt()

//get text
let name = $('.name').text();
//match the spaces
var matches = name.match(/\b(\w)/g); // [D,P,R]
//join the chars - if needed
var joinChar = matches.join(''); // DPR
//show the split name
$('.splitname').text(joinChar);
console.log(matches ) // [D,P,R] //Array
console.log(joinChar) //DPR //String

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">Desmond Patrick Reymond</div>
<div class="splitname"></div>