Как обернуть область вокруг последнего слова внутреннего текста элемента, используя jQuery?

Question

Я знаю, что это должно быть простой задачей, но у меня проблемы с выбором последнего слова элементов заголовка и переносом его в промежуток, чтобы я мог добавить изменения стиля.

Вот что у меня есть

$('.side-c h3').split(/\s+/).pop().wrap('<span />');

Любая помощь будет принята с благодарностью

Answer 1

Проблема в том, что объекты jQuery обертывают узлы DOM.Каждое слово в элементе не является самим DOM-узлом, поэтому вам нужно немного больше поработать, чтобы разбить текст и присоединиться к нему.Вам также необходимо учитывать несколько узлов, выбранных jQuery.Попробуйте это:

$('.side-c h3').each(function(index, element) {
    var heading = $(element), word_array, last_word, first_part;

    word_array = heading.html().split(/\s+/); // split on spaces
    last_word = word_array.pop();             // pop the last word
    first_part = word_array.join(' ');        // rejoin the first words together

    heading.html([first_part, ' <span>', last_word, '</span>'].join(''));
});

Answer 2

Это делает это:

$('.side-c h3').each(function(){
   var $this = $(this), text=$this.text().trim(), words = text.split(/\s+/);
   var lastWord = words.pop();
   words.push('<span>' + lastWord + '</span>');
   $this.html(words.join(' '));
});

Answer 3

Хм, это не особенно легко. Самый ортодоксальный способ сделать это с DOMNode.splitText:

$('.side-c h3').each(function(){
    var oldNode = this.firstChild,
        newNode = oldNode.splitText(oldNode.data.lastIndexOf(' ') + 1), // don't wrap the space
        span = document.createElement('span');

    this.replaceChild(span, newNode);
    span.appendChild(newNode);
});

См. Jsfiddle .