어떻게 요소의 텍스트 노드를 얻으려면?

해결법

1.
```
var text = $(".title").contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).text();
```
이것은 선택된 요소의 내용을 취득하고, 그것을 필터 함수를 적용한다. 필터 함수 반환 만 텍스트 노드 (nodeType에 == Node.TEXT_NODE로 즉 그 노드).
2.당신은 사용하여 첫 번째 childNode에의 nodeValue를 얻을 수 있습니다

당신은 사용하여 첫 번째 childNode에의 nodeValue를 얻을 수 있습니다
```
$('.title')[0].childNodes[0].nodeValue
```
http://jsfiddle.net/TU4FB/
3.당신이 요소의 첫 번째 텍스트 노드의 가치를 의미하는 경우,이 코드가 작동합니다 :

당신이 요소의 첫 번째 텍스트 노드의 가치를 의미하는 경우,이 코드가 작동합니다 :
```
var oDiv = document.getElementById("MyDiv");
var firstText = "";
for (var i = 0; i < oDiv.childNodes.length; i++) {
    var curNode = oDiv.childNodes[i];
    if (curNode.nodeName === "#text") {
        firstText = curNode.nodeValue;
        break;
    }
}
```
http://jsfiddle.net/ZkjZJ/ : 현재 작업에서 볼 수 있습니다
4."복합체"또는 중첩 요소에 유용 할 수있는 다른 천연 JS 주어, NodeIterator 용액을 사용하는 것이다. 두 번째 인수 ( "whatToShow에")로 NodeFilter.SHOW_TEXT을 넣고 요소의 반복 처리를 통해 단지 텍스트 노드의 아이들.

"복합체"또는 중첩 요소에 유용 할 수있는 다른 천연 JS 주어, NodeIterator 용액을 사용하는 것이다. 두 번째 인수 ( "whatToShow에")로 NodeFilter.SHOW_TEXT을 넣고 요소의 반복 처리를 통해 단지 텍스트 노드의 아이들.

VAR 루트 = document.querySelector ( 'P'), ITER는 document.createNodeIterator (루트, NodeFilter.SHOW_TEXT를) = textnode; 모든 텍스트 노드를 인쇄 // 반면 (textnode iter.nextNode = ()) { CONSOLE.LOG (textnode.textContent) }
로
일부 텍스트는 123

또한 TreeWalker를 사용할 수 있습니다. 둘 사이의 차이는 TreeWalker 당신이뿐만 아니라 형제와 조상을 통해 탐색 할 수 있습니다 동안 주어, NodeIterator가, 반복자 선형 간단한 것입니다.

5.DOM을 텍스트를 찾을 때 우선은, 항상이 점을 명심.

DOM을 텍스트를 찾을 때 우선은, 항상이 점을 명심.

MDN -는 DOM의 공백

이 문제는 당신이 당신의 XML / HTML의 구조에주의를 기울여야 할 것이다.

이 순수 자바 스크립트 예제에서는 노드의 다른 종류의 인터리브 될 수있는 여러 텍스트 노드의 수를 차지하고있다. 그러나, 처음에, 나는 다른 코드에 그 필터링 작업을두고, 공백에 판단을 전달하지 않습니다.

이 버전에서는, 나는 호출 / 클라이언트 코드에서의 NodeList를 전달합니다.

/**
* Gets strings from text nodes. Minimalist. Non-robust. Pre-test loop version.
* Generic, cross platform solution. No string filtering or conditioning.
*
* @author Anthony Rutledge
* @param nodeList The child nodes of a Node, as in node.childNodes.
* @param target A positive whole number >= 1
* @return String The text you targeted.
*/
function getText(nodeList, target)
{
    var trueTarget = target - 1,
        length = nodeList.length; // Because you may have many child nodes.

    for (var i = 0; i < length; i++) {
        if ((nodeList[i].nodeType === Node.TEXT_NODE) && (i === trueTarget)) {
            return nodeList[i].nodeValue;  // Done! No need to keep going.
        }
    }

    return null;
}

물론, 테스트 node.hasChildNodes에 의해 () 첫째, 루프에 대한 사전 테스트를 사용할 필요가 없을 것입니다.

/**
* Gets strings from text nodes. Minimalist. Non-robust. Post-test loop version.
* Generic, cross platform solution. No string filtering or conditioning.
*
* @author Anthony Rutledge
* @param nodeList The child nodes of a Node, as in node.childNodes.
* @param target A positive whole number >= 1
* @return String The text you targeted.
*/
function getText(nodeList, target)
{
    var trueTarget = target - 1,
        length = nodeList.length,
        i = 0;

    do {
        if ((nodeList[i].nodeType === Node.TEXT_NODE) && (i === trueTarget)) {
            return nodeList[i].nodeValue;  // Done! No need to keep going.
         }

        i++;
    } while (i < length);

    return null;
}

여기 getTextById 함수 ()는 두 도우미 함수 사용 getStringsFromChildren () 및 filterWhitespaceLines을 ().

아이들에는 getString ()

/**
* Collects strings from child text nodes.
* Generic, cross platform solution. No string filtering or conditioning.
*
* @author Anthony Rutledge
* @version 7.0
* @param parentNode An instance of the Node interface, such as an Element. object.
* @return Array of strings, or null.
* @throws TypeError if the parentNode is not a Node object.
*/
function getStringsFromChildren(parentNode)
{
    var strings = [],
        nodeList,
        length,
        i = 0;

    if (!parentNode instanceof Node) {
        throw new TypeError("The parentNode parameter expects an instance of a Node.");
    }

    if (!parentNode.hasChildNodes()) {
        return null; // We are done. Node may resemble <element></element>
    }

    nodeList = parentNode.childNodes;
    length = nodeList.length;

    do {
        if ((nodeList[i].nodeType === Node.TEXT_NODE)) {
            strings.push(nodeList[i].nodeValue);
         }

        i++;
    } while (i < length);

    if (strings.length > 0) {
        return strings;
    }

    return null;
}

filterWhitespaceLines ()

/**
* Filters an array of strings to remove whitespace lines.
* Generic, cross platform solution.
*
* @author Anthony Rutledge
* @version 6.0
* @param textArray a String associated with the id attribute of an Element.
* @return Array of strings that are not lines of whitespace, or null.
* @throws TypeError if the textArray param is not of type Array.
*/
function filterWhitespaceLines(textArray) 
{
    var filteredArray = [],
        whitespaceLine = /(?:^\s+$)/; // Non-capturing Regular Expression.

    if (!textArray instanceof Array) {
        throw new TypeError("The textArray parameter expects an instance of a Array.");
    }

    for (var i = 0; i < textArray.length; i++) {
        if (!whitespaceLine.test(textArray[i])) {  // If it is not a line of whitespace.
            filteredArray.push(textArray[i].trim());  // Trimming here is fine. 
        }
    }

    if (filteredArray.length > 0) {
        return filteredArray ; // Leave selecting and joining strings for a specific implementation. 
    }

    return null; // No text to return.
}

getTextById ()

/**
* Gets strings from text nodes. Robust.
* Generic, cross platform solution.
*
* @author Anthony Rutledge
* @version 6.0
* @param id A String associated with the id property of an Element.
* @return Array of strings, or null.
* @throws TypeError if the id param is not of type String.
* @throws TypeError if the id param cannot be used to find a node by id.
*/
function getTextById(id) 
{
    var textArray = null;             // The hopeful output.
    var idDatatype = typeof id;       // Only used in an TypeError message.
    var node;                         // The parent node being examined.

    try {
        if (idDatatype !== "string") {
            throw new TypeError("The id argument must be of type String! Got " + idDatatype);
        }

        node = document.getElementById(id);

        if (node === null) {
            throw new TypeError("No element found with the id: " + id);
        }

        textArray = getStringsFromChildren(node);

        if (textArray === null) {
            return null; // No text nodes found. Example: <element></element>
        }

        textArray = filterWhitespaceLines(textArray);

        if (textArray.length > 0) {
            return textArray; // Leave selecting and joining strings for a specific implementation. 
        }
    } catch (e) {
        console.log(e.message);
    }

    return null; // No text to return.
}

다음으로, 반환 값 (배열 또는 NULL)이 처리되어야하는 클라이언트 코드로 전송된다. 바라 건데, 배열은 실제 텍스트, 공백이 아닌 라인의 문자열 요소가 있어야합니다.

제대로 유효한 텍스트의 존재를 표시하는 텍스트 노드를 필요로하기 때문에 빈 문자열 ( "") 반환되지 않습니다. ( "") 반환하는 그들이 .NodeValue 이렇게 값을 변경하여 텍스트를 변경할 수 있다고 가정 할 사람을 선도하고, 텍스트 노드가 존재한다는 잘못된 인상을 줄 수 있습니다. 텍스트 노드는 빈 문자열의 경우에는 존재하지 않기 때문에, false입니다.

예 1 :

<p id="bio"></p> <!-- There is no text node here. Return null. -->

예 2 :

<p id="bio">

</p> <!-- There are at least two text nodes ("\n"), here. -->

문제는 당신이 그것을 밖으로 간격으로 읽기 쉽게 HTML을하고자 할 때 제공됩니다. 이제 어떤 사람이 읽을 수있는 유효한 텍스트가없는 경우에도, 자신의 .NodeValue 그러면 속성에서 줄 바꿈 텍스트 노드 ( "\ n") 문자는 여전히 존재한다.

충전 대기 빈 요소 - 인간은 예제 하나 기능적으로 동등한 같은 두 가지를 참조하십시오. DOM은 인간의 추론과 다릅니다. getStringsFromChildren () 함수는 텍스트 노드가 존재하는지 확인 및 배열에 .NodeValue 이렇게 값을 수집해야하는 이유입니다.

for (var i = 0; i < length; i++) {
    if (nodeList[i].nodeType === Node.TEXT_NODE) {
            textNodes.push(nodeList[i].nodeValue);
    }
}

예를 들어 두 개의에서는 두 개의 텍스트 노드가 둘의 .NodeValue 이렇게 돌아갑니다 존재하고 getStringFromChildren ()를 수행 ( "\ n"). 그러나 filterWhitespaceLines ()는 순수 공백 문자의 행을 필터링하는 정규 표현식을 사용합니다.

널 대신 줄 바꿈 ( "\ n") 문자 코드를 호출 / 클라이언트에 거짓말의 한 형태를 반환? 인간의 관점에서, 아니. DOM의 관점에서, 예. 그러나 여기에 문제는 편집을하지, 텍스트를 받고있다. 호출 코드에 반환 할 인간의 텍스트가 없습니다.

하나는 많은 개행 문자가 누군가의 HTML에 나타날 수있는 방법을 알 수 없다. 카운터를 작성하면 "두 번째"개행 문자 외모는 신뢰할 수있다. 그것은 존재하지 않을 수도 있습니다.

물론, 더 선 아래로, 여분의 공백 (예 2)와 요소 보장하기 위해 단락의 태그 사이의 모든하지만 하나 개의 텍스트 노드를 (아마도 생략) 파괴 빈

의 텍스트를 편집의 문제를 의미 할 수 있습니다 요소는이 표시되어 있는지 정확하게 포함되어 있습니다.

에 관계없이, 당신이 특별한 뭔가를하고있는 경우를 제외하고, 당신은 텍스트 노드의 .NodeValue 이렇게 속성을 편집 할 것을 참, 사람이 읽을 수있는 텍스트가 결정하는 방법이 필요합니다. filterWhitespaceLines이 우리에게 절반 방법을 가져옵니다.

var whitespaceLine = /(?:^\s+$)/; // Non-capturing Regular Expression.

for (var i = 0; i < filteredTextArray.length; i++) {
    if (!whitespaceLine.test(textArray[i])) {  // If it is not a line of whitespace.
        filteredTextArray.push(textArray[i].trim());  // Trimming here is fine. 
    }
}

이 시점에서 당신은 모양이를 좋아하는 출력을 할 수 있습니다 :

["Dealing with text nodes is fun.", "Some people just use jQuery."]

이 두 개의 문자열이 너무 부 자연스러운 합성을 할 수 있음) (.join로 합류는 DOM에서 서로 인접한다는 보장은 없다. 대신, getTextById를 호출하는 코드에서 (), 당신은 당신이 작업하고자하는 문자열을 선택해야합니다.

출력 테스트.

try {
    var strings = getTextById("bio");

    if (strings === null) {
        // Do something.
    } else if (strings.length === 1) {
        // Do something with strings[0]
    } else { // Could be another else if
        // Do something. It all depends on the context.
    }
} catch (e) {
    console.log(e.message);
}

하나는 선행 및 후행 공백 없애) (getStringsFromChildren ()의 내부를 .trim 추가 할 수 있습니다 (또는 0 길이 문자열 ( "")로 공간의 무리를 켭니다,하지만 어떻게 당신은 모든 응용 프로그램이 필요할 수 있습니다 어떤 선험적으로 알 수 있습니다 이 발견되면 텍스트 (문자열)에게 무슨 일이 있나요? 당신은, 그래서 getStringsFromChildren을 특정 구현에 그것을두고하지 않는 () 일반적인합니다.

특이성 (타겟과 같은)의 레벨이 필요하지 않은 경우가있을 수있다. 그거 좋다. 이러한 경우에 간단한 솔루션을 사용합니다. 그러나 일반화 된 알고리즘은 간단하고 복잡한 상황을 수용 할 수 있습니다.

6.처음하는 #text 노드의 내용을 반환 ES6 버전

처음하는 #text 노드의 내용을 반환 ES6 버전

const extract = (node) => {
  const text = [...node.childNodes].find(child => child.nodeType === Node.TEXT_NODE);
  return text && text.textContent.trim();
}

7.는 .text () - 대한 jQuery

는 .text () - 대한 jQuery

$('.title').clone()    //clone the element
.children() //select all the children
.remove()   //remove all the children
.end()  //again go back to selected element
.text();    //get the text of element

8.이것은 당신의 핵심 자바 스크립트를 사용하여 빈 textNodes..code 없었어, 그래서뿐만 아니라 공백을 무시합니다.

이것은 당신의 핵심 자바 스크립트를 사용하여 빈 textNodes..code 없었어, 그래서뿐만 아니라 공백을 무시합니다.
```
var oDiv = document.getElementById("MyDiv");
var firstText = "";
for (var i = 0; i < oDiv.childNodes.length; i++) {
    var curNode = oDiv.childNodes[i];
    whitespace = /^\s*$/;
    if (curNode.nodeName === "#text" && !(whitespace.test(curNode.nodeValue))) {
        firstText = curNode.nodeValue;
        break;
    }
}
```
jsfiddle에 확인 : - http://jsfiddle.net/webx/ZhLep/
9.또한 텍스트 만 노드를 얻기 위해 XPath에의 텍스트 () 노드 테스트를 사용할 수 있습니다. 예를 들면

또한 텍스트 만 노드를 얻기 위해 XPath에의 텍스트 () 노드 테스트를 사용할 수 있습니다. 예를 들면
```
var target = document.querySelector('div.title');
var iter = document.evaluate('text()', target, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE);
var node;
var want = '';

while (node = iter.iterateNext()) {
    want += node.data;
}
```
10.이 ES6 내 솔루션은 모든 childNodes에 (재귀)의 연결된 텍스트를 포함하는 문자열을 만드는 것입니다. 또한 childNodes에의 shadowroot를 방문한다 참고.

이 ES6 내 솔루션은 모든 childNodes에 (재귀)의 연결된 텍스트를 포함하는 문자열을 만드는 것입니다. 또한 childNodes에의 shadowroot를 방문한다 참고.
```
function text_from(node) {
    const extract = (node) => [...node.childNodes].reduce(
        (acc, childnode) => [
            ...acc,
            childnode.nodeType === Node.TEXT_NODE ? childnode.textContent.trim() : '',
            ...extract(childnode),
            ...(childnode.shadowRoot ? extract(childnode.shadowRoot) : [])],
        []);

    return extract(node).filter(text => text.length).join('\n');
}
```
이 솔루션은 https://stackoverflow.com/a/41051238./1300775의 솔루션에 의해 영감을했다.

from https://stackoverflow.com/questions/6520192/how-to-get-the-text-node-of-an-element by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] DOM의 속성 변경에 이벤트를 발사 (0)	2020.10.07
[JQUERY] JQuery와 직렬화를 사용하여 파일 업로드를 수행하는 방법 (0)	2020.10.07
[JQUERY] jQuery를 사용하면 HTML 태그를 변경하려면? (0)	2020.10.06
[JQUERY] 그 내용의 일치에 의해 요소를 선택 (0)	2020.10.06
[JQUERY] 크롬에서 로컬 파일을 사용하여 jQuery를해서 getJSON 문제 (0)	2020.10.06

복붙노트

[JQUERY] 어떻게 요소의 텍스트 노드를 얻으려면?

어떻게 요소의 텍스트 노드를 얻으려면?

해결법

1.

2.당신은 사용하여 첫 번째 childNode에의 nodeValue를 얻을 수 있습니다

3.당신이 요소의 첫 번째 텍스트 노드의 가치를 의미하는 경우,이 코드가 작동합니다 :

4."복합체"또는 중첩 요소에 유용 할 수있는 다른 천연 JS 주어, NodeIterator 용액을 사용하는 것이다. 두 번째 인수 ( "whatToShow에")로 NodeFilter.SHOW_TEXT을 넣고 요소의 반복 처리를 통해 단지 텍스트 노드의 아이들.

5.DOM을 텍스트를 찾을 때 우선은, 항상이 점을 명심.

6.처음하는 #text 노드의 내용을 반환 ES6 버전

7.는 .text () - 대한 jQuery

8.이것은 당신의 핵심 자바 스크립트를 사용하여 빈 textNodes..code 없었어, 그래서뿐만 아니라 공백을 무시합니다.

9.또한 텍스트 만 노드를 얻기 위해 XPath에의 텍스트 () 노드 테스트를 사용할 수 있습니다. 예를 들면

10.이 ES6 내 솔루션은 모든 childNodes에 (재귀)의 연결된 텍스트를 포함하는 문자열을 만드는 것입니다. 또한 childNodes에의 shadowroot를 방문한다 참고.

'JQUERY' 카테고리의 다른 글

티스토리툴바