Селектор первого слова

Ответ 1

Замена HTML приведет к тому, что обработчики событий будут несвязаны и замена всего текста для элемента приведет к потере HTML-разметки. Наилучший подход оставляет любой HTML нетронутым, манипулируя только первым текстом node соответствующего элемента. Чтобы получить этот текст node, вы можете использовать .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/

Ответ 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

Ответ 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);
});

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

$.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/

Ответ 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();