第一个单词选择器

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/

使用此方法将确保操作第一个单词不会对元素的其余内容产生不需要的副作用。

---

您可以轻松地将其作为 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

这应该有效：

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

Answer 4

基本上你可以这样做

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

Answer 5

这可能会帮助你

jquery 字符串中的第一个单词

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

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