请问Nodejs使用jsdom和jquery模块后如何遍历所有的标签？

请问Nodejs使用jsdom和jquery模块后如何遍历所有的标签？

目前情况是： 我想对markdown生成的html中标签文字部分进行处理（每个文字加上标签，便于前端操作），我用jsdom、jquery模块目前能够把markdown转化的html字符串转为jquery对象，但是由于对jquery并不是很了解，不知道如何遍历到所有的标签……

     通过chilidren().each()可以遍历第一层的所有标签（p和ol），但是却遍历不到嵌套的标签（li和img），请问有什么便捷的方法解决，感谢！

例如

<div> <p>12345678</p> <ol> <li>我是1</li><li>他是2</li></ol> <p><img ……><p> </div>


3 回复

要解决这个问题，我们可以利用 jsdom 和 jQuery 来遍历整个 HTML 文档中的所有标签。虽然 children().each() 只能遍历直接子元素，但我们可以使用递归方法来遍历所有嵌套的标签。

以下是一个示例代码，展示如何使用 jsdom 和 jQuery 遍历所有的标签，并对每个标签的文字部分进行处理：

const { JSDOM } = require('jsdom');
const $ = require('jquery');

// 示例 Markdown 转换后的 HTML 字符串
const htmlString = `
<div>
    <p>12345678</p>
    <ol>
        <li>我是1</li>
        <li>他是2</li>
    </ol>
    <p><img src="example.jpg" alt="Example"></p>
</div>
`;

// 使用 jsdom 将 HTML 字符串转换为 DOM 对象
const dom = new JSDOM(htmlString);
const $document = $(dom.window.document);

function traverseAndProcessElements($element) {
    // 遍历当前元素的所有子元素
    $element.children().each((index, child) => {
        const $child = $(child);
        
        // 如果子元素是文本节点，则对其进行处理
        if ($child.is('*')) {
            $child.text(`[${$child.text()}]`);
        }
        
        // 递归遍历子元素
        traverseAndProcessElements($child);
    });
}

// 开始遍历并处理根元素
traverseAndProcessElements($document);

console.log($document.html());

解释

  1. 引入依赖:

    • jsdom 用于将 HTML 字符串解析为 DOM 对象。
    • jquery 用于方便地选择和操作 DOM 元素。

  2. HTML 字符串:

    • 我们有一个包含多个标签的 HTML 字符串。

  3. DOM 解析:

    • 使用 JSDOM 将 HTML 字符串转换为 DOM 对象，并使用 jQuery 包装它以便于操作。

  4. 递归函数 traverseAndProcessElements:

    • 这个函数接收一个 jQuery 对象 $element 作为参数。
    • 使用 .children() 方法获取当前元素的所有子元素，并通过 .each() 方法遍历这些子元素。
    • 如果子元素是文本节点，则对其进行处理（在这个例子中，我们简单地在文本前后添加方括号）。
    • 递归调用自身来遍历所有嵌套的子元素。

  5. 开始遍历:

    • 从根元素开始调用 traverseAndProcessElements 函数。

  6. 输出结果:

    • 最后打印处理后的 HTML 字符串。

这种方法可以确保所有嵌套的标签都被遍历和处理。你可以根据需要修改处理逻辑，以适应具体的需求。


感谢没人回复……问题已解决

为了遍历所有标签并处理它们的文字内容，你可以结合使用 jsdom 和 jQuery 来递归遍历整个 DOM 树。下面是一个示例代码，展示了如何遍历所有标签并将每个标签中的文字内容加上新的标签。

示例代码

const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const $ = require('jquery')(new JSDOM().window);

// 假设你已经有一个 markdown 转换后的 HTML 字符串
const htmlString = `
<div>
    <p>12345678</p>
    <ol>
        <li>我是1</li>
        <li>他是2</li>
    </ol>
    <p><img src="example.jpg"></p>
</div>
`;

// 使用 jsdom 解析 HTML 字符串
const dom = new JSDOM(htmlString);
const $doc = $(dom.window.document);

function processTextNodes($element) {
    $element.contents().each(function() {
        if (this.nodeType === Node.ELEMENT_NODE) {
            // 如果是元素节点，则递归处理其子节点
            processTextNodes($(this));
        } else if (this.nodeType === Node.TEXT_NODE) {
            // 如果是文本节点，则处理文本内容
            const text = this.textContent.trim();
            if (text.length > 0) {
                // 创建一个新标签包裹文本内容
                const newElement = $(`<span>${text}</span>`);
                $(this).replaceWith(newElement);
            }
        }
    });
}

// 开始遍历和处理
processTextNodes($doc);

console.log($doc.html());

代码解释

  1. 解析 HTML: 使用 jsdom 解析 Markdown 转换后的 HTML 字符串。
  2. 定义函数 processTextNodes: 这个函数会递归遍历每个节点。
    • 使用 .contents() 获取当前节点的所有子节点（包括文本节点和元素节点）。
    • 使用 .each() 遍历这些子节点。
    • 如果节点是元素节点（Node.ELEMENT_NODE），则递归调用 processTextNodes 处理子节点。
    • 如果节点是文本节点（Node.TEXT_NODE），则创建一个新的 <span> 标签包裹文本内容，并替换原有的文本节点。
  3. 遍历和处理: 调用 processTextNodes 函数开始遍历和处理 DOM 树中的所有节点。
  4. 输出结果: 打印处理后的 HTML 结构。

这样你就可以遍历并处理所有标签中的文字内容了。

回到顶部