Primo selettore di parole

Come posso selezionare la prima parola in un div?

Devo essere in grado di inserire un’interruzione di riga dopo la prima parola o di includerla in un tag span. Devo farlo per più div su una pagina con la stessa class.

La sostituzione di HTML comporterà il blocco dei gestori di eventi e la sostituzione dell’intero testo per un elemento comporterà la perdita del markup HTML. L’approccio migliore lascia intatto qualsiasi HTML, manipolando solo il primo nodo di testo dell’elemento corrispondente. Per ottenere quel nodo di testo, puoi usare .contents() e .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('' + first + '
'); };

Demo funzionante: http://jsfiddle.net/9AXvN/

L’utilizzo di questo metodo garantirà che la manipolazione della prima parola non avrà effetti collaterali indesiderati sul resto del contenuto dell’elemento.


Puoi facilmente aggiungerlo come estensione a jQuery, con un valore opzionale per il numero di parole che desideri racchiudere:

 $.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('' + first + '
'); };

Demo funzionante: http://jsfiddle.net/9AXvN/1/

Questo dovrebbe funzionare:

 $('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($("").html(word).addClass("em")); }); 

JSFiddle

basicamente puoi fare così

 $ ('ELEMENT_SELECTOR'). Text (). Split ('') [0]

Ora ora ho già ricevuto una risposta, ma sono molto nuovo di jQuery e ho pensato di provarlo. Commenti per favore!

 $('div.message').each(function(index) { //get the first word var firstWord = $(this).text().split(' ')[0]; //wrap it with span var replaceWord = "" + firstWord + ""; //create new string with span included var newString = $(this).html().replace(firstWord, replaceWord); //apply to the divs $(this).html(newString); }); 

Questo potrebbe aiutarti

Prima parola in stringa con jquery

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

In realtà, se vuoi usarlo come plugin, in modo che lo faccia per tutti gli elementi nel selettore, non solo il primo, usa questo:

 $.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('' + first + ''); }); }; 

http://jsfiddle.net/rxAMF/

 /* 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 ? " " + last + "" : last)); }; $.fn.firstWord = function() { var text = this.text().trim().split(" "); var first = text.shift(); this.html((text.length > 0 ? ""+ first + " " : first) + text.join(" ")); }; $("#firstWord").firstWord(); $("#lastWord").lastWord();