jQuery 第一个词选择器

First word selector

提问by Evanss

How can I select the first word in a div?

如何选择div中的第一个单词？

I need to be able to insert a line break after the first word, or wrap it in a span tag. I need to do this for multiple divs on a page with the same class.

我需要能够在第一个单词后插入换行符，或者将其包装在 span 标签中。我需要为具有相同类的页面上的多个 div 执行此操作。

回答by Andy E

Replacing HTML will result in event handlers being unbound and replacing the entire text for an element will result in HTML markup being lost. The best approach leaves any HTML untouched, manipulating only the first text node of the matching element. To get that text node, you can use .contents()and .filter():

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

Working demo: http://jsfiddle.net/9AXvN/

工作演示：http: //jsfiddle.net/9AXvN/

Using this method will ensure that manipulating the first word will have no unwanted side effects on the rest of the element's content.

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

---

---

You can easily tack this on as an extension to jQuery, with an optional value for the number of words you want to wrap:

您可以轻松地将其添加为 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/>');
};

Working demo: http://jsfiddle.net/9AXvN/1/

工作演示：http: //jsfiddle.net/9AXvN/1/

回答by Dogbert

This should work:

这应该有效：

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

JSFiddle

回答by Nick Hartley

Now I now this has already been answered, but I am very new to jquery and thought I would give it a go. Comments please!

现在我现在已经回答了这个问题，但我对 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);
});

回答by Fatih Acet

basicly you can do like this

基本上你可以这样做

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

回答by Vicky

This may help you

这可能会帮助你

First Word in String with jquery

使用 jquery 字符串中的第一个单词

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

回答by edzjins

Actually, if you want to use it as a plugin, so that it would do it for all the items in the selector, not only the first one, use this one:

实际上，如果您想将它用作插件，以便它可以为选择器中的所有项目执行此操作，而不仅仅是第一个，请使用以下项目：

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

http://jsfiddle.net/rxAMF/

回答by TheMadCat

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