복붙노트

[JQUERY] 는 .text ()를 사용하여 자식 태그에 중첩뿐만 아니라 텍스트를 검색 할 수

JQUERY

는 .text ()를 사용하여 자식 태그에 중첩뿐만 아니라 텍스트를 검색 할 수

해결법


  1. 1.나는 부모 요소 내부의 텍스트 만 얻기 위해 여기에있는 클론 () 메소드에 따라이 재사용 가능한 구현을 좋아했다.

    나는 부모 요소 내부의 텍스트 만 얻기 위해 여기에있는 클론 () 메소드에 따라이 재사용 가능한 구현을 좋아했다.

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

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

  2. 2.간단한 대답 :

    간단한 대답 :

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

  3. 3.이것은 나에게 jQuery를 남용의 경우처럼 보인다. 다음은 다른 노드를 무시하고 텍스트를 잡아 것입니다 :

    이것은 나에게 jQuery를 남용의 경우처럼 보인다. 다음은 다른 노드를 무시하고 텍스트를 잡아 것입니다 :

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

    당신은 트림해야하지만 당신은 하나, 쉽게 라인에서 원하는 무엇을 얻을 수 있습니다.

    편집하다

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

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

  4. 4.쉽고 빠르게 :

    쉽고 빠르게 :

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

  5. 5.하지만 복제없이 허용 대답 유사 :

    하지만 복제없이 허용 대답 유사 :

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

    그리고 여기이 목적을위한 jQuery 플러그인은 다음과 같습니다

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

    다음은이 플러그인을 사용하는 방법입니다 :

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

  6. 6.코드는되지 않습니다 :

    코드는되지 않습니다 :

    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
    

  7. 7.이 시도:

    이 시도:

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

  8. 8.그것은 당신이 제시하고있는 구조에 의존 요구에 맞게 뭔가해야합니다. 당신이 제공 한 예를 들어,이 작품 :

    그것은 당신이 제시하고있는 구조에 의존 요구에 맞게 뭔가해야합니다. 당신이 제공 한 예를 들어,이 작품 :

    $(document).ready(function(){
         var $tmp = $('#listItem').children().remove();
         $('#listItem').text('').append($tmp);
    });
    

    데모 : http://jquery.nodnod.net/cases/2385/run

    그러나 당신이 게시 된 것과 유사한되는 마크 업에 상당히 의존합니다.


  9. 9.

    $($('#listItem').contents()[0]).text()
    

    스튜어트 응답의 짧은 변형.

    또는 GET와 ()

    $($('#listItem').contents().get(0)).text()
    

  10. 10.

    jQuery.fn.ownText = function () {
        return $(this).contents().filter(function () {
            return this.nodeType === Node.TEXT_NODE;
        }).text();
    };
    

  11. 11.이것은 오래된 질문이지만 상단 대답은 매우 비효율적이다. 여기에 더 나은 솔루션입니다 :

    이것은 오래된 질문이지만 상단 대답은 매우 비효율적이다. 여기에 더 나은 솔루션입니다 :

    $.fn.myText = function() {
        var str = '';
    
        this.contents().each(function() {
            if (this.nodeType == 3) {
                str += this.textContent || this.innerText || '';
            }
        });
    
        return str;
    };
    

    그리고 바로이 작업을 수행 :

    $("#foo").myText();
    

  12. 12.나는이 또한 좋은 솔루션이 될 것입니다 가정 - 당신이 선택한 요소의 직계 자식 인 모든 텍스트 노드의 내용을 얻으려면.

    나는이 또한 좋은 솔루션이 될 것입니다 가정 - 당신이 선택한 요소의 직계 자식 인 모든 텍스트 노드의 내용을 얻으려면.

    $(selector).contents().filter(function(){ return this.nodeType == 3; }).text();
    

    참고 : jQuery를이 문서는 내용 기능을 설명하기 위해 유사한 코드를 사용 https://api.jquery.com/contents/

    추신 이 것을 할 수있는 비트 추악한 방법도하지만이 쇼 더 깊이 사물이 작동하는 방법, 및 텍스트 노드 사이의 사용자 정의 분리 가능 (당신이 줄 바꿈을 원하는 어쩌면이)

    $(selector).contents().filter(function(){ return this.nodeType == 3; }).map(function() { return this.nodeValue; }).toArray().join("");
    

  13. 13.나는 모든 텍스트를 HTML 요소 (이 기능은 jQuery를 확장하는 데 사용할 수 있습니다)에 연결되지 않은 요소를 찾기 위해 createTreeWalker를 사용하는 제안 :

    나는 모든 텍스트를 HTML 요소 (이 기능은 jQuery를 확장하는 데 사용할 수 있습니다)에 연결되지 않은 요소를 찾기 위해 createTreeWalker를 사용하는 제안 :

    기능 textNodesOnlyUnder (엘) { VAR으로 결과 집합 = []; VAR N = NULL; VAR treeWalker는 document.createTreeWalker (EL, NodeFilter.SHOW_TEXT 함수 (노드) = { (. 길이 node.parentNode.id == el.id && node.textContent.trim ()를! = 0) {만약 NodeFilter.FILTER_ACCEPT를 반환; } NodeFilter.FILTER_SKIP를 반환; } 거짓); 동안 (N = treeWalker.nextNode ()) { resultSet.push (N); } 결과 집합 반환; } 창로드 = 함수 () { VAR ELE = document.getElementById를 ( '되는 listItem'); VAR textNodesOnly = textNodesOnlyUnder (ELE); VAR resultingText textNodesOnly.map = (함수 (브로, 인덱스 도착) { 창 '텍스트 요소 N.'+ 인덱스 + '->'+ val.textContent.trim (); .})) (조인 '\ n'; . document.getElementById를 ( 'txtArea') 값 = resultingText; } <리튬 ID = "되는 listItem"> 이것은 텍스트입니다 <스팬 ID = "firstSpan"> 우선 스팬 텍스트 <스팬 ID = "secondSpan"> 제 스팬 텍스트 <텍스트 영역 ID = "txtArea"스타일 = "폭 : 400 픽셀, 높이 200 픽셀;">


  14. 14.텍스트 노드의 위치 지수는 형제 자매 사이에 고정되어 있으면 사용할 수 있습니다

    텍스트 노드의 위치 지수는 형제 자매 사이에 고정되어 있으면 사용할 수 있습니다

    $('parentselector').contents().eq(index).text()
    

  15. 15.확실하지 커버에 필요하지만, 텍스트가 항상 첫 번째 HTML 태그 앞에 오는 경우 예를 들어, 얼마나 많은 경우 어떻게 유연 또는 - 왜 그냥 첫 번째 태그에서 내부 HTML을 분할 이전을하지 :

    확실하지 커버에 필요하지만, 텍스트가 항상 첫 번째 HTML 태그 앞에 오는 경우 예를 들어, 얼마나 많은 경우 어떻게 유연 또는 - 왜 그냥 첫 번째 태그에서 내부 HTML을 분할 이전을하지 :

    $('#listItem').html().split('<span')[0]; 
    

    당신은 그것을 필요로하는 경우 더 넓은 어쩌면 단지를

    $('#listItem').html().split('<')[0]; 
    

    당신이 한 가지 후 같은하지만 다른 전에 두 마커 사이의 텍스트를 필요로하는 경우 문이 시작 또는 끝 마커 또는 둘 모두를 유연 충분히 할 경우는 null 심판의 오류를 피하면서, 당신은 (테스트되지 않은) 사용과 같은 작업을 수행 할 수 있습니다 :

    var startMarker = '';// put any starting marker here
    var endMarker = '<';// put the end marker here
    var myText = String( $('#listItem').html() );
    // if the start marker is found, take the string after it
    myText = myText.split(startMarker)[1];        
    // if the end marker is found, take the string before it
    myText = myText.split(endMarker)[0];
    console.log(myText); // output text between the first occurrence of the markers, assuming both markers exist.  If they don't this will throw an error, so some if statements to check params is probably in order...
    

    나는 일반적으로 그들에게 무료로 오류 확인과 같은 유용한 것들에 대한 유틸리티 기능을하고 자주에 의존 한 번 고체, 오히려 항상 등 그 방법을 문자열 조작의 유형을 재 작성하고 널 참조 위험을 회피하기 위해서, 당신은 기능을 다시 사용할 수 있습니다 많은 프로젝트 결코에서 문자열 참조가 정의되지 않은 참조 오류가 왜 다시 디버깅에 시간을 낭비해야합니다. 지금까지 가장 짧은 한 줄의 코드 수 있지만,이 유틸리티 기능이 후, 그 다음부터 한 줄입니다하지 않을 수 있습니다. 대부분의 코드는 단지 회피 오류가 아닌지되는 매개 변수를 처리합니다 :)

    예를 들면 :

    /**
    * Get the text between two string markers.
    **/
    function textBetween(__string,__startMark,__endMark){
        var hasText = typeof __string !== 'undefined' && __string.length > 0;
        if(!hasText) return __string;
        var myText = String( __string );
        var hasStartMarker = typeof __startMark !== 'undefined' && __startMark.length > 0 && __string.indexOf(__startMark)>=0;
        var hasEndMarker =  typeof __endMark !== 'undefined' && __endMark.length > 0 && __string.indexOf(__endMark) > 0;
        if( hasStartMarker )  myText = myText.split(__startMark)[1];
        if( hasEndMarker )    myText = myText.split(__endMark)[0];
        return myText;
    }
    
    // now with 1 line from now on, and no jquery needed really, but to use your example:
    var textWithNoHTML = textBetween( $('#listItem').html(), '', '<'); // should return text before first child HTML tag if the text is on page (use document ready etc)
    

  16. 16.이것은 나를 위해 좋은 방법입니다

    이것은 나를 위해 좋은 방법입니다

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

  17. 17.나는 훨씬 더 복제보다 더 효율적이고 클론의 수정해야 특정 솔루션을 함께했다. 이 솔루션은 다음과 같은 두 가지 예약 작동하지만 현재 접수 솔루션보다 더 효율적이어야한다 :

    나는 훨씬 더 복제보다 더 효율적이고 클론의 수정해야 특정 솔루션을 함께했다. 이 솔루션은 다음과 같은 두 가지 예약 작동하지만 현재 접수 솔루션보다 더 효율적이어야한다 :

    그렇게 말한다면, 여기에 코드입니다 :

    // 'element' is a jQuery element
    function getText(element) {
      var text = element.text();
      var childLength = element.children().text().length;
      return text.slice(0, text.length - childLength);
    }
    

  18. 18.그냥 질문처럼, 나는 텍스트의 일부 정규식 치환을하기 위해 텍스트를 추출하려고했지만 내 내부 요소 문제 얻고 있었다 (예 : ,
    , , 등)도지고 있었다를 제거.

    그냥 질문처럼, 나는 텍스트의 일부 정규식 치환을하기 위해 텍스트를 추출하려고했지만 내 내부 요소 문제 얻고 있었다 (예 : ,

    , , 등)도지고 있었다를 제거.

    다음 코드는 잘 작동하는 것 같다 내 모든 문제를 해결했다.

    그것은 여기에 제공된 답변의 일부를 사용하지만 요소가 nodeType에 === 3의 경우 특히, 텍스트 만 교체됩니다.

    $(el).contents().each(function() { 
      console.log(" > Content: %s [%s]", this, (this.nodeType === 3));
    
      if (this.nodeType === 3) {
        var text = this.textContent;
        console.log(" > Old   : '%s'", text);
    
        regex = new RegExp("\\[\\[" + rule + "\\.val\\]\\]", "g");
        text = text.replace(regex, value);
    
        regex = new RegExp("\\[\\[" + rule + "\\.act\\]\\]", "g");
        text = text.replace(regex, actual);
    
        console.log(" > New   : '%s'", text);
        this.textContent = text;
      }
    });
    

    단지 $ ( "div.my 급 [이름 = '어떤 이름이']"); 각 내부 소자의 경우, 기본적으로이를 무시 얻었다 주어진 EL의 모든 요소 (루프 스루 란 상기 않는 것이다 .들만 소자에 적용 할 정규식 교체 (경우 (this.nodeType === 3)에 의해 결정됨) 텍스트의 각 부분에 대한.

    this.textContent = 텍스트 부분은 단순히 제 경우에, I는 [min.val], [max.val] 등과 같은 토큰 찾던 치환 텍스트를 대체

    이 짧은 코드 발췌 좀 더 질문을 물어 무슨 일을하려고 사람을 도와 ... 것이다.


  19. 19.단 몇 줄의 IE 9 이상과 호환되는 구문에서 일반 자바 스크립트를 사용 :

    단 몇 줄의 IE 9 이상과 호환되는 구문에서 일반 자바 스크립트를 사용 :

    let children = document.querySelector('#listItem').childNodes;
    
    if (children.length > 0) {
        childrenLoop:
        for (var i = 0; i < children.length; i++) {
            //only target text nodes (nodeType of 3)
            if (children[i].nodeType === 3) {
                //do not target any whitespace in the HTML
                if (children[i].nodeValue.trim().length > 0) {
                    children[i].nodeValue = 'Replacement text';
                    //optimized to break out of the loop once primary text node found
                    break childrenLoop;
                }
            }
        }
    }
    

  20. 20.단지

    에 넣어 또는 <글꼴> 잡아 $이 ( '#되는 listItem 글꼴'). 텍스트를 ()

    단지

    에 넣어 또는 <글꼴> 잡아 $이 ( '#되는 listItem 글꼴'). 텍스트를 ()

    마음에 와서 제일 먼저

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

  21. 21.이 시도 할 수 있습니다

    이 시도 할 수 있습니다

    alert(document.getElementById('listItem').firstChild.data)
    

  22. 22.innerHTML을하고 innerText와가 같은 경우 확인하기 위해 추가 조건을 사용합니다. 만 이러한 경우에, 텍스트를 교체합니다.

    innerHTML을하고 innerText와가 같은 경우 확인하기 위해 추가 조건을 사용합니다. 만 이러한 경우에, 텍스트를 교체합니다.

    $(function() {
    $('body *').each(function () {
        console.log($(this).html());
        console.log($(this).text());
        if($(this).text() === "Search" && $(this).html()===$(this).text())  {
            $(this).html("Find");
        }
    })
    })
    

    http://jsfiddle.net/7RSGh/


  23. 23.결과를 손질 할 수 있으려면, DotNetWala의 너무 등에 사용

    결과를 손질 할 수 있으려면, DotNetWala의 너무 등에 사용

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

    나는 document.getElementById를 ( "되는 listItem")와 같은 짧은 버전을 사용하는 것을 알아 냈다. childNodes에 [0] jQuery의 트림하지 된 작업이 ().


  24. 24.나는 JQuery와 전문가가 아니지만, 방법에 대한

    나는 JQuery와 전문가가 아니지만, 방법에 대한

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

  25. 25.이 테스트되지 않은,하지만 난 당신이 이런 식으로 뭔가를 시도 할 수 있습니다 생각 :

    이 테스트되지 않은,하지만 난 당신이 이런 식으로 뭔가를 시도 할 수 있습니다 생각 :

     $('#listItem').not('span').text();
    

    http://api.jquery.com/not/

  26. from https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags by cc-by-sa and MIT license