JS.getTextContent(element,preformatted)使用介绍

简介

JS.getTextContent(element,preformatted) 是一个JS函数，用于获取元素中的文本内容。该函数常用于网页数据爬取、文本处理等场景。

该函数包含两个参数，分别为 element 和 preformatted。其中，element 是需要获取文本内容的元素；preformatted 是一个可选参数，用于指定文本是否为格式化后的文本，如果设置为 true，则表示获取的文本是格式化后的文本。

函数原型

function getTextContent(element, preformatted) {
    if (typeof element === 'string') {
        element = document.querySelector(element);
    }
    if (element === null) {
        return '';
    }
    var textContent = '';

    function traverse(node) {
        var childNodes = node.childNodes;
        for (var i = 0; i < childNodes.length; i++) {
            var child = childNodes[i];
            if (child.nodeType === Node.TEXT_NODE) {
                var text = child.textContent ||child.nodeValue ||child.text || '';
                if (preformatted) {
                    textContent += text + '\n';
                } else {
                    textContent += text.replace(/\s+/g, ' ') + ' ';
                }
            } else if (child.nodeType === Node.ELEMENT_NODE && child.nodeName !== 'SCRIPT' && child.nodeName !== 'STYLE') {
                traverse(child);
            }
        }
    }
    traverse(element);
    return textContent.trim();
}

示例

示例1

获取 id 为 content 的 div 元素中的文本内容

HTML 代码：

<div id="content">
    <p>Hello world</p>
    <ul>
        <li>list1</li>
        <li>list2</li>
    </ul>
</div>

JavaScript 代码：

var content = document.querySelector('#content');
var textContent = getTextContent(content);
console.log(textContent); // 'Hello world list1 list2'

示例2

获取格式化后的 id 为 pre 区域的文本内容

HTML 代码：

<pre id="preContent">
    <h1>Test</h1>
    <p>Hello world</p>
    <ul>
        <li>list1</li>
        <li>list2</li>
    </ul>
</pre>

JavaScript 代码：

var preContent = document.querySelector('#preContent');
var textContent = getTextContent(preContent, true);
console.log(textContent); // '\n    Test\n    Hello world\n    list1\n    list2\n'