Selector de primera palabra

Question

¿Cómo puedo seleccionar la primera palabra en un div?

Necesito poder insertar un salto de línea después de la primera palabra, o envolverlo en una etiqueta span. Necesito hacer esto para múltiples divs en una página con la misma clase.

Answer 1

Al reemplazar HTML, los controladores de eventos se liberarán y reemplazar el texto completo de un elemento provocará la pérdida de la marca HTML. El mejor enfoque deja intacto cualquier HTML, manipulando solo el primer nodo de texto del elemento coincidente. Para conseguir que el nodo de texto, puede utilizar .contents() y .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/>'); 
}; 

demostración de trabajo: http://jsfiddle.net/9AXvN/

Usando este método se asegurará de que la manipulación de la primera palabra no tendrá efectos secundarios no deseados en el resto de el contenido del elemento.

---

Usted puede virar fácilmente esta en como una extensión de jQuery, con un valor opcional para el número de palabras que quieres para envolver:

$.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/>'); 
}; 

demostración de trabajo: http://jsfiddle.net/9AXvN/1/

Answer 2

Esto puede ayudarle a

First Word in String with jquery

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

Answer 3

básicamente se puede hacer como esto

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

Answer 4

Esto debería funcionar:

$('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 5

Ahora que esto ya ha sido respondido, pero soy muy nuevo para jquery y pensé que lo probaría. Comentarios por favor!

$('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 6

En realidad, si desea utilizarlo como un plug-in, por lo que lo haría por todos los elementos en el selector, no sólo la primera, utilizar éste:

$.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 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();