पहला शब्द चयनकर्ता

Question

मैं div में पहला शब्द कैसे चुन सकता हूं?

मुझे पहले शब्द के बाद लाइन ब्रेक डालने में सक्षम होना चाहिए, या इसे एक स्पैन टैग में लपेटना होगा। मुझे एक ही कक्षा के साथ एक पेज पर एकाधिक divs के लिए ऐसा करने की जरूरत है।

Answer 1

एचटीएमएल को बदलने से इवेंट हैंडलर अनबाउंड हो जाएंगे और पूरे टेक्स्ट को किसी तत्व के लिए बदल दिया जाएगा जिसके परिणामस्वरूप HTML मार्कअप खो जाएगा। सबसे अच्छा तरीका किसी भी एचटीएमएल को छूता है, जो मेल खाने वाले तत्व के पहले टेक्स्ट नोड को जोड़ता है।

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

कार्य प्रदर्शन: है कि पाठ नोड के लिए, आप .contents() और .filter() उपयोग कर सकते हैं 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

यह आपको

First Word in String with jquery

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

Answer 3

मूल रूप से आप इस

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

Answer 4

की तरह कर सकते हैं मदद मिल सकती है यह काम करना चाहिए:

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

अब मैं अब इसका जवाब दे चुका हूं, लेकिन मैं 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 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/

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