[jquery] .text ()를 사용하여 자식 태그에 중첩되지 않은 텍스트 만 검색

Program / 글쓴이

내가 이런 HTML을 가지고 있다면 :

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

.text()“This is some text”라는 문자열 만 검색 하려고하는데 $('#list-item').text()“이것은 textFirst span textSecond span text”입니다.

.text("")자식 태그 내의 텍스트가 아닌 태그 내의 무료 텍스트 만 가져 오는 방법이 있습니까?

HTML은 내가 작성하지 않았으므로 이것으로 작업해야합니다. HTML을 작성할 때 텍스트를 태그로 감싸는 것이 간단하지만 HTML은 미리 작성되어 있습니다.

답변

부모 요소 내부의 텍스트 만 가져 오기 위해 여기 에서 clone()찾은 메소드를 기반으로하는 재사용 가능한 구현이 마음에 들었습니다 .

쉽게 참조 할 수 있도록 제공된 코드 :

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();

답변

간단한 답변 :

$("#listItem").contents().filter(function(){
  return this.nodeType == 3;
})[0].nodeValue = "The text you want to replace with"

답변

이것은 jquery를 과도하게 사용하는 경우처럼 보입니다. 다음은 다른 노드를 무시하고 텍스트를 가져옵니다.

document.getElementById("listItem").childNodes[0];

당신은 그것을 다듬어야하지만 하나의 쉬운 라인에서 원하는 것을 얻습니다.

편집하다

위의 텍스트 노드 를 얻을 것이다 . 실제 텍스트를 얻으려면 다음을 사용하십시오.

document.getElementById("listItem").childNodes[0].nodeValue;

답변

쉽고 빠르게 :

$("#listItem").contents().get(0).nodeValue

답변

허용되는 답변과 비슷하지만 복제하지 않은 경우 :

$("#foo").contents().not($("#foo").children()).text();

이 목적을위한 jQuery 플러그인은 다음과 같습니다.

$.fn.immediateText = function() {
    return this.contents().not(this.children()).text();
};

이 플러그인을 사용하는 방법은 다음과 같습니다.

$("#foo").immediateText(); // get the text without children

답변

코드가 아닙니다 :

var text  =  $('#listItem').clone().children().remove().end().text();

jQuery를 위해 jQuery가되고 있습니까? 간단한 작업에 많은 체인 명령과 많은 (불필요한) 처리가 포함되면 jQuery 확장을 작성해야 할 때입니다.

(function ($) {
    function elementText(el, separator) {
        var textContents = [];
        for(var chld = el.firstChild; chld; chld = chld.nextSibling) {
            if (chld.nodeType == 3) {
                textContents.push(chld.nodeValue);
            }
        }
        return textContents.join(separator);
    }
    $.fn.textNotChild = function(elementSeparator, nodeSeparator) {
    if (arguments.length<2){nodeSeparator="";}
    if (arguments.length<1){elementSeparator="";}
        return $.map(this, function(el){
            return elementText(el,nodeSeparator);
        }).join(elementSeparator);
    }
} (jQuery));

전화 :

var text = $('#listItem').textNotChild();

다음과 같은 다른 시나리오가 발생하는 경우 인수가 발생합니다.

<li>some text<a>more text</a>again more</li>
<li>second text<a>more text</a>again more</li>

var text = $("li").textNotChild(".....","<break>");

텍스트는 가치가 있습니다 :

some text<break>again more.....second text<break>again more

답변

이 시도:

$('#listItem').not($('#listItem').children()).text()