첫 번째 단어 선택기

Question

div에서 첫 번째 단어를 선택하려면 어떻게해야합니까?

첫 단어 뒤에 줄 바꿈을 삽입하거나 span 태그에 줄 바꿈을 할 수 있어야합니다. 동일한 클래스의 페이지에서 여러 div에 대해이 작업을 수행해야합니다.

Answer 1

HTML을 바꾸면 이벤트 핸들러가 언 바운드되고 요소의 전체 텍스트를 바꾸면 HTML 마크 업이 손실됩니다. 가장 좋은 방법은 일치하는 요소의 첫 번째 텍스트 노드 만 조작하여 HTML을 그대로 둡니다. 첫 번째 단어를 조작하는 나머지에 원치 않는 부작용이 없다는 것을 보장합니다이 방법을 사용 http://jsfiddle.net/9AXvN/

:

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()을 사용할 수 있습니다 요소의 내용

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

$('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를 확장으로이에 압정 수 있습니다 이제 나는 이제 이미 답변을 얻었지만 나는 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();