Выбор первого слова

Question

Как я могу выбрать первое слово в div?

Мне нужно иметь возможность вставить разрыв строки после первого слова или обернуть его в тег span. Мне нужно сделать это для нескольких элементов div на странице с одним и тем же классом.

Answer 1

Замена HTML приведет к тому, что обработчики событий не будут связаны, а замена всего текста для элемента приведет к потере разметки HTML.Лучший подход - оставить любой HTML нетронутым, манипулируя только первым текстовым узлом соответствующего элемента.Чтобы получить этот текстовый узел, вы можете использовать .contents() и .filter():

function wrapFirstWord () { 
    // Select only the first text node
    var node = $("div").contents().filter(function () { 
            return this.nodeType == 3;
        }).first(),

    // Get the text... 
        text = node.text(),

    // ... and the first word
        first = text.slice(0, text.indexOf(" "));

    if (!node.length)
        return;

    // Remove the first word from the text
    node[0].nodeValue = text.slice(first.length);

    // Add it back in with HTML around it
    node.before('<span>' + first + '</span><br/>');
};

Рабочая демонстрация: http://jsfiddle.net/9AXvN/

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

Вы можете легко прикрепить это как расширение к jQuery с необязательным значением для количества слов, которое вы хотите заключить:

$.fn.wrapStart = function (numWords) { 
    var node = this.contents().filter(function () { 
            return this.nodeType == 3 
        }).first(),
        text = node.text(),
        first = text.split(" ", numWords).join(" ");

    if (!node.length)
        return;

    node[0].nodeValue = text.slice(first.length);
    node.before('<span>' + first + '</span><br/>');
};

Рабочая демонстрация: http://jsfiddle.net/9AXvN/1/

Answer 2

Это должно работать:

$('div.message').each(function() {
   var html = $(this).html();
   var word = html.substr(0, html.indexOf(" "));
   var rest = html.substr(html.indexOf(" "));
   $(this).html(rest).prepend($("<span/>").html(word).addClass("em"));
});

JSFiddle

Answer 3

Теперь мне уже на это уже ответили, но я очень плохо знаком с jquery и думал, что попробую.Комментарии, пожалуйста!

$('div.message').each(function(index) {
    //get the first word
    var firstWord = $(this).text().split(' ')[0];

    //wrap it with span
    var replaceWord = "<span class='myClass'>" + firstWord + "</span>";

    //create new string with span included
    var newString = $(this).html().replace(firstWord, replaceWord);

    //apply to the divs
    $(this).html(newString);
});

Answer 4

в основном вы можете сделать это

$('ELEMENT_SELECTOR').text().split(' ')[0]

Answer 5

На самом деле, если вы хотите использовать его как плагин, чтобы он делал это для всех элементов в селекторе, а не только для первого, используйте этот:

$.fn.wrapStart = function(numWords){
    return this.each(function(){
        $this = $(this);
        var node = $this.contents().filter(function(){
            return this.nodeType == 3
        }).first(),
        text = node.text(),
        first = text.split(" ", numWords).join(" ");
        if (!node.length) return;
        node[0].nodeValue = text.slice(first.length);
        node.before('<span>' + first + '</span>');
    });
};

http://jsfiddle.net/rxAMF/

Answer 6

Это может помочь вам

Первое слово в строке с jquery

$('div.message').text(function(i,txt) {
    var name = $('div.name').text().split(' ')[ 0 ];   
});

Answer 7

/*
URL → https://github.com/melbon/jquery.useWord
*/
$.fn.lastWord = function() {
  var text = this.text().trim().split(" ");
  var last = text.pop();
  this.html(text.join(" ") + (text.length > 0 ? " <span class='lastWord'>" + last + "</span>" : last));
};


$.fn.firstWord = function() {
  var text = this.text().trim().split(" ");
  var first = text.shift();
  this.html((text.length > 0 ? "<span class='firstWord'>"+ first + "</span> " : first) + text.join(" "));
};


$("#firstWord").firstWord();
$("#lastWord").lastWord();