首字选择器

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/

采用这种方法将确保操作的第一个字会对其余无不良副作用元素的内容。

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

basicly你可以像这样

 
$('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，与字的数目的可选值现在我已经回答了这个问题，但我对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();