jQuery 또는 Pure JavaScript를 사용하여 요소 내에서 텍스트 노드를 어떻게 선택할 수 있습니까?

jQuery로 텍스트 노드 선택

jQuery로 요소의 하위 텍스트 노드를 선택하려면 약간의 창의성이 필요합니다. jQuery는 이 작업에 대해 특정 기능을 제공하지 않지만, 원하는 결과를 얻기 위해 content() 및 find() 메소드를 결합하는 것이 가능합니다.

jQuery 솔루션

var getTextNodesIn = function(el) {
    return $(el).find(":not(iframe)").addBack().contents().filter(function() {
        return this.nodeType == 3;
    });
};

getTextNodesIn(el);

content()를 사용하여 텍스트 노드를 포함한 하위 노드를 수집하는 코드입니다. 그런 다음 find()를 사용하여 하위 요소와 텍스트 노드를 격리합니다. 이 솔루션에는 iframe 요소에 대한 특별한 처리가 필요합니다.

순수 JavaScript 솔루션

순수 JavaScript 접근 방식을 선호하는 경우 다음 기능을 사용할 수 있습니다.

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], nonWhitespaceMatcher = /\S/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}

getTextNodesIn(el);

이 함수는 DOM 트리를 재귀적으로 탐색하여 노드 유형에 따라 텍스트 노드를 식별합니다. 매개변수를 전달하여 공백 노드를 포함할 수 있습니다.

위 내용은 jQuery 또는 Pure JavaScript를 사용하여 요소 내에서 텍스트 노드를 어떻게 선택할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!