parse_html_to_node 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Martin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,313 @@
+# parse_html
+
+[![npm version](https://img.shields.io/npm/v/parse_html)](https://www.npmjs.com/package/parse_html)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
+一个不依赖浏览器环境的HTML字符串解析器，可将HTML转换为可操作的对象树，支持完整的DOM操作、属性管理和样式处理。
+
+## 特性
+
+- 🚀 **零依赖**：纯JavaScript实现，无需浏览器环境
+- 🔧 **完整DOM操作**：支持`before`、`after`、`insert`等DOM操作方法
+- 🏷️ **属性管理**：提供`getAttr`、`setAttr`、`setAttrs`等方法
+- 🎨 **样式处理**：支持`getStyle`、`setStyle`、`setStyles`等方法
+- 🌳 **多根节点支持**：可解析HTML片段（多个根节点）
+- 📦 **TypeScript支持**：完整的类型定义
+- ⚡ **高性能**：轻量级实现，快速解析
+
+## 安装
+
+```bash
+npm install parse_html
+```
+
+或
+
+```bash
+yarn add parse_html
+```
+
+或
+
+```bash
+pnpm add parse_html
+```
+
+## 快速开始
+
+```javascript
+import Node from 'parse_html';
+
+// 解析单根HTML
+const html = `
+  <div class="container" id="main" style="color: red; background-color: #fff;">
+    <p>Hello World</p>
+    <img src="test.jpg" alt="test" />
+  </div>
+`;
+
+const node = new Node(html);
+
+// 获取HTML内容
+console.log(node.getHtml());
+
+// 获取子节点
+const children = node.child();
+console.log(children.length); // 2
+
+// 获取属性
+console.log(node.getAttr('id')); // "main"
+
+// 获取样式
+console.log(node.getStyle('backgroundColor')); // "#fff"
+```
+
+## API文档
+
+### `Node` 类
+
+#### 构造函数
+```typescript
+new Node(html: string): Node
+```
+通过HTML字符串创建节点对象，支持单根和多根HTML。
+
+#### 属性
+- `tagName: string` - 标签名（`#text`表示文本节点，`#fragment`表示片段节点）
+- `attributes: IAttributeData` - 属性对象
+- `styles: Record<string, string>` - 样式对象（驼峰格式）
+- `textContent: string` - 文本内容
+- `children: Node[]` - 子节点数组
+- `parent: Node | null` - 父节点
+
+### 方法
+
+#### `child(): Node[]`
+获取当前节点的所有子节点（浅拷贝）。
+
+```javascript
+const children = node.child();
+```
+
+#### `before(newNode: string | Node): Node`
+在当前节点之前插入新节点。
+
+```javascript
+node.before('<span>Before</span>');
+```
+
+#### `after(newNode: string | Node): Node`
+在当前节点之后插入新节点。
+
+```javascript
+node.after('<span>After</span>');
+```
+
+#### `insert(position: number, newNode: string | Node): Node`
+在指定位置插入新节点。
+
+```javascript
+// 在第一个子节点前插入
+node.insert(0, '<span>First</span>');
+```
+
+#### `getAttr(attrName: string): string | null`
+获取指定属性的值。
+
+```javascript
+const id = node.getAttr('id');
+```
+
+#### `setAttr(attrName: string, value: string | null | undefined): Node`
+设置或删除属性。
+
+```javascript
+// 设置属性
+node.setAttr('class', 'container');
+
+// 删除属性
+node.setAttr('class', null);
+```
+
+#### `setAttrs(attrs: Record<string, string | null | undefined>): Node`
+批量设置属性。
+
+```javascript
+node.setAttrs({
+  'id': 'main',
+  'class': 'container',
+  'data-test': null // 删除属性
+});
+```
+
+#### `getStyle(styleProp: string): string | null`
+获取指定样式的值。
+
+```javascript
+const color = node.getStyle('color');
+const bgColor = node.getStyle('backgroundColor'); // 支持驼峰格式
+```
+
+#### `setStyle(styleProp: string, value: string | null | undefined): Node`
+设置或删除样式。
+
+```javascript
+// 设置样式
+node.setStyle('color', 'red');
+
+// 删除样式
+node.setStyle('color', null);
+```
+
+#### `setStyles(styles: Record<string, string | null | undefined>): Node`
+批量设置样式。
+
+```javascript
+node.setStyles({
+  'color': 'red',
+  'fontSize': '14px',
+  'backgroundColor': null // 删除样式
+});
+```
+
+#### `getHtml(): string`
+获取当前节点的完整HTML字符串。
+
+```javascript
+const htmlString = node.getHtml();
+```
+
+## 示例
+
+### 1. 多根节点解析
+
+```javascript
+import Node from 'parse_html';
+
+const multiRootHtml = `
+  <p>第一段文本</p>
+  <div class="box" style="font-size: 14px;">第二段内容</div>
+  <span>第三段</span>
+`;
+
+const fragmentNode = new Node(multiRootHtml);
+console.log(fragmentNode.tagName); // "#fragment"
+console.log(fragmentNode.child().length); // 3
+console.log(fragmentNode.getHtml()); // 输出拼接后的完整HTML
+```
+
+### 2. DOM操作
+
+```javascript
+import Node from 'parse_html';
+
+const parent = new Node('<div id="parent"></div>');
+
+// 插入子节点
+parent.insert(0, '<span>Child 1</span>');
+parent.insert(1, '<span>Child 2</span>');
+
+// 在子节点间插入
+const firstChild = parent.child()[0];
+firstChild.after('<span>Between</span>');
+
+console.log(parent.getHtml());
+// <div id="parent"><span>Child 1</span><span>Between</span><span>Child 2</span></div>
+```
+
+### 3. 属性和样式操作
+
+```javascript
+import Node from 'parse_html';
+
+const node = new Node('<div>Test</div>');
+
+// 设置属性和样式
+node.setAttrs({
+  'id': 'test',
+  'class': 'container'
+});
+
+node.setStyles({
+  'color': 'blue',
+  'fontSize': '16px',
+  'padding': '10px'
+});
+
+// 获取属性和样式
+console.log(node.getAttr('id')); // "test"
+console.log(node.getStyle('fontSize')); // "16px"
+
+// 更新样式
+node.setStyle('color', 'green');
+console.log(node.getStyle('color')); // "green"
+```
+
+### 4. 文本节点处理
+
+```javascript
+import Node from 'parse_html';
+
+const html = 'Hello <strong>World</strong>!';
+const node = new Node(html);
+
+// 文本节点会被正确解析
+console.log(node.child().length); // 3
+console.log(node.child()[0].tagName); // "#text"
+console.log(node.child()[0].textContent); // "Hello "
+```
+
+## 注意事项
+
+1. **片段节点**：多根HTML会解析为`#fragment`节点，其属性/样式操作会返回`null`。
+2. **自闭合标签**：支持`img`、`br`、`input`、`meta`等标准自闭合标签。
+3. **样式格式**：内部使用驼峰格式，但解析时支持短横线格式。
+4. **错误处理**：无效HTML会抛出错误，请确保HTML格式正确。
+
+## 开发
+
+### 构建项目
+
+```bash
+# 安装依赖
+pnpm install
+
+# 开发模式（监听文件变化）
+pnpm run dev
+
+# 构建项目
+pnpm run build
+```
+
+### 项目结构
+
+```
+parse_html/
+├── lib/
+│   └── index.ts     # 源代码
+├── dist/            # 构建输出
+├── text.ts          # 使用示例
+├── package.json
+└── tsconfig.json
+```
+
+## 贡献
+
+欢迎提交Issue和Pull Request！
+
+1. Fork 项目
+2. 创建功能分支 (`git checkout -b feature/amazing-feature`)
+3. 提交更改 (`git commit -m 'Add some amazing feature'`)
+4. 推送到分支 (`git push origin feature/amazing-feature`)
+5. 开启 Pull Request
+
+## 许可证
+
+[MIT](LICENSE) © Huang Jingjing
+
+## 相关链接
+
+- [GitHub仓库](https://github.com/Easy-Martin/parse_html)
+- [npm包](https://www.npmjs.com/package/parse_html)
+- [问题反馈](https://github.com/Easy-Martin/parse_html/issues)

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+interface IAttributeData {
+    [key: string]: string | Record<string, string> | undefined;
+    styleObj?: Record<string, string>;
+}
+declare class Node {
+    #private;
+    tagName: string;
+    attributes: IAttributeData;
+    styles: Record<string, string>;
+    textContent: string;
+    children: Node[];
+    parent: Node | null;
+    /**
+     * 构造函数：通过HTML字符串初始化节点（支持单根/多根）
+     * @param {string} html - HTML字符串（单根/多根均可）
+     */
+    constructor(html: string);
+    /**
+     * 子集管理：获取当前节点的所有子节点
+     * @returns {Node[]} 子节点数组（浅拷贝）
+     */
+    child(): Node[];
+    /**
+     * DOM操作：在当前节点之后插入新元素
+     * @param {string|Node} newNode - 要插入的HTML字符串或Node实例
+     * @returns {Node} 当前节点（链式调用）
+     */
+    before(newNode: string | Node): Node;
+    /**
+     * DOM操作：在当前节点之后插入新元素
+     * @param {string|Node} newNode - 要插入的HTML字符串或Node实例
+     * @returns {Node} 当前节点（链式调用）
+     */
+    after(newNode: string | Node): Node;
+    /**
+     * DOM操作：在指定位置插入新元素
+     * @param {number} position - 插入位置（0 ~ children.length）
+     * @param {string|Node} newNode - 要插入的HTML字符串或Node实例
+     * @returns {Node} 当前节点（链式调用）
+     */
+    insert(position: number, newNode: string | Node): Node;
+    /**
+     * 属性操作：获取指定属性的值
+     * @param {string} attrName - 属性名
+     * @returns {string|null} 属性值（不存在返回null）
+     */
+    getAttr(attrName: string): string | null;
+    /**
+     * 属性操作：设置指定属性的值
+     * @param {string} attrName - 属性名
+     * @param {string|null|undefined} value - 属性值（null/undefined删除属性）
+     * @returns {Node} 当前节点（链式调用）
+     */
+    setAttr(attrName: string, value: string | null | undefined): Node;
+    /**
+     * 属性操作：批量设置多个属性
+     * @param {Record<string, string | null | undefined>} attrs - 包含属性名-属性值键值对的对象
+     * @returns {Node} 当前节点（链式调用）
+     */
+    setAttrs(attrs: Record<string, string | null | undefined>): Node;
+    /**
+     * 样式操作：获取指定样式属性的值
+     * @param {string} styleProp - 样式属性名（支持驼峰/短横线）
+     * @returns {string|null} 样式值（不存在返回null）
+     */
+    getStyle(styleProp: string): string | null;
+    /**
+     * 样式操作：设置指定样式属性的值
+     * @param {string} styleProp - 样式属性名（支持驼峰/短横线）
+     * @param {string|null|undefined} value - 样式值（null/undefined删除样式）
+     * @returns {Node} 当前节点（链式调用）
+     */
+    setStyle(styleProp: string, value: string | null | undefined): Node;
+    /**
+     * 样式操作：批量设置多个样式属性
+     * @param {Record<string, string | null | undefined>} styles - 包含样式属性名-样式值键值对的对象
+     * @returns {Node} 当前节点（链式调用）
+     */
+    setStyles(styles: Record<string, string | null | undefined>): Node;
+    /**
+     * 获取当前节点的完整HTML文本
+     * @returns {string} HTML字符串
+     */
+    getHtml(): string;
+}
+export default Node;

package/dist/index.js

@@ -0,0 +1,626 @@
+"use strict";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Node_instances, _a, _Node_generateHTMLFromData, _Node_convertToNode;
+Object.defineProperty(exports, "__esModule", { value: true });
+// 自闭合标签常量（只读数组）
+const SELF_CLOSING_TAGS = ["img", "br", "input", "meta", "link", "hr", "area", "base", "col", "embed", "param", "source", "track", "wbr"];
+// 工具函数：驼峰转短横线（用于样式属性）
+function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+// 工具函数：短横线转驼峰（用于样式属性）
+function kebabToCamel(str) {
+    return str.replace(/-([a-z])/g, (_, match) => match.toUpperCase());
+}
+// 工具函数：解析属性字符串为属性对象（修改返回类型为IAttributeData）
+function parseAttributes(attrStr) {
+    const attrs = {}; // 修改：使用扩展后的属性接口
+    if (!attrStr)
+        return attrs;
+    // 匹配属性键值对：key="value" / key='value' / key=value
+    const attrRegex = /([a-zA-Z0-9-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/g;
+    let match;
+    while ((match = attrRegex.exec(attrStr)) !== null) {
+        const [, key, doubleVal, singleVal, noQuoteVal] = match;
+        const value = doubleVal || singleVal || noQuoteVal || "";
+        attrs[key] = value;
+    }
+    // 解析style属性为样式对象（内部属性，不对外输出）
+    if (attrs.style) {
+        const styleObj = {};
+        const styleRegex = /([a-zA-Z0-9-]+)\s*:\s*([^;]+)/g;
+        let styleMatch;
+        while ((styleMatch = styleRegex.exec(attrs.style)) !== null) {
+            const [, prop, val] = styleMatch;
+            styleObj[kebabToCamel(prop.trim())] = val.trim();
+        }
+        attrs.styleObj = styleObj; // 现在类型匹配，无TS错误
+        delete attrs.style; // 替换为结构化的样式对象
+    }
+    return attrs;
+}
+// 核心工具函数：解析单个节点（内部使用）
+function parseSingleNode(html) {
+    html = html.trim();
+    if (!html)
+        return null;
+    // 文本节点（非标签内容）
+    if (!html.startsWith("<")) {
+        return {
+            tagName: "#text",
+            textContent: html,
+            attributes: {}, // 符合IAttributeData类型
+            styles: {},
+            children: [],
+            parent: null,
+        };
+    }
+    const selfClosingRegex = /<([a-zA-Z0-9]+)\s*(.*?)\/?>/;
+    const selfClosingMatch = html.match(selfClosingRegex);
+    // 处理自闭合标签
+    if (selfClosingMatch) {
+        const [, tagName, attrStr] = selfClosingMatch;
+        if (SELF_CLOSING_TAGS.includes(tagName.toLowerCase())) {
+            const attrs = parseAttributes(attrStr);
+            return {
+                tagName: tagName.toLowerCase(),
+                attributes: attrs, // 类型匹配
+                styles: attrs.styleObj || {}, // styleObj是Record<string, string>，符合styles类型
+                textContent: "",
+                children: [],
+                parent: null,
+            };
+        }
+    }
+    // 匹配开始标签
+    const startTagRegex = /<([a-zA-Z0-9]+)\s*(.*?)>/;
+    const startTagMatch = html.match(startTagRegex);
+    if (!startTagMatch)
+        return null;
+    const [startTag, tagName, attrStr] = startTagMatch;
+    const lowerTagName = tagName.toLowerCase();
+    const endTag = `</${lowerTagName}>`;
+    // 查找匹配的结束标签（处理嵌套）
+    let endTagIndex = -1;
+    let tagCount = 1;
+    let currentIndex = startTag.length;
+    while (currentIndex < html.length && tagCount > 0) {
+        const nextStart = html.indexOf(`<${lowerTagName}`, currentIndex);
+        const nextEnd = html.indexOf(endTag, currentIndex);
+        if (nextEnd === -1)
+            break;
+        if (nextStart !== -1 && nextStart < nextEnd) {
+            tagCount++;
+            currentIndex = nextStart + `<${lowerTagName}`.length;
+        }
+        else {
+            tagCount--;
+            if (tagCount === 0)
+                endTagIndex = nextEnd;
+            currentIndex = nextEnd + endTag.length;
+        }
+    }
+    // 提取标签内容（开始标签和结束标签之间）
+    const content = endTagIndex !== -1 ? html.slice(startTag.length, endTagIndex).trim() : html.slice(startTag.length).trim();
+    // 构建基础节点数据
+    const attrs = parseAttributes(attrStr);
+    const nodeData = {
+        tagName: lowerTagName,
+        attributes: attrs, // 类型匹配
+        styles: attrs.styleObj || {}, // 类型匹配
+        textContent: "",
+        children: [],
+        parent: null,
+    };
+    // 解析子节点
+    if (content) {
+        const childNodes = [];
+        let remaining = content;
+        while (remaining) {
+            const tagStart = remaining.indexOf("<");
+            if (tagStart === -1) {
+                // 纯文本内容
+                const textNode = parseSingleNode(remaining);
+                if (textNode)
+                    childNodes.push(textNode);
+                remaining = "";
+            }
+            else {
+                if (tagStart > 0) {
+                    // 标签前的文本
+                    const textNode = parseSingleNode(remaining.slice(0, tagStart));
+                    if (textNode)
+                        childNodes.push(textNode);
+                    remaining = remaining.slice(tagStart);
+                }
+                else {
+                    // 解析嵌套标签
+                    const tempTagMatch = remaining.match(startTagRegex);
+                    if (!tempTagMatch) {
+                        const textNode = parseSingleNode(remaining);
+                        if (textNode)
+                            childNodes.push(textNode);
+                        remaining = "";
+                        continue;
+                    }
+                    const tempTagName = tempTagMatch[1].toLowerCase();
+                    const tempEndTag = `</${tempTagName}>`;
+                    // 自闭合标签直接处理
+                    if (SELF_CLOSING_TAGS.includes(tempTagName)) {
+                        const selfNode = parseSingleNode(remaining.slice(0, tempTagMatch[0].length));
+                        if (selfNode)
+                            childNodes.push(selfNode);
+                        remaining = remaining.slice(tempTagMatch[0].length).trim();
+                        continue;
+                    }
+                    // 查找嵌套标签的结束位置
+                    let tempEndIndex = -1;
+                    let tempTagCount = 1;
+                    let tempCurrentIndex = tempTagMatch[0].length;
+                    while (tempCurrentIndex < remaining.length && tempTagCount > 0) {
+                        const nextTempStart = remaining.indexOf(`<${tempTagName}`, tempCurrentIndex);
+                        const nextTempEnd = remaining.indexOf(tempEndTag, tempCurrentIndex);
+                        if (nextTempEnd === -1)
+                            break;
+                        if (nextTempStart !== -1 && nextTempStart < nextTempEnd) {
+                            tempTagCount++;
+                            tempCurrentIndex = nextTempStart + `<${tempTagName}`.length;
+                        }
+                        else {
+                            tempTagCount--;
+                            if (tempTagCount === 0)
+                                tempEndIndex = nextTempEnd;
+                            tempCurrentIndex = nextTempEnd + tempEndTag.length;
+                        }
+                    }
+                    // 提取子节点HTML并递归解析
+                    if (tempEndIndex !== -1) {
+                        const childHTML = remaining.slice(0, tempEndIndex + tempEndTag.length);
+                        const childNode = parseSingleNode(childHTML);
+                        if (childNode)
+                            childNodes.push(childNode);
+                        remaining = remaining.slice(tempEndIndex + tempEndTag.length).trim();
+                    }
+                    else {
+                        const childNode = parseSingleNode(remaining);
+                        if (childNode)
+                            childNodes.push(childNode);
+                        remaining = "";
+                    }
+                }
+            }
+        }
+        // 过滤无效节点并赋值
+        nodeData.children = childNodes.filter(Boolean);
+        // 单一文本子节点直接合并到textContent
+        if (nodeData.children.length === 1 && nodeData.children[0].tagName === "#text") {
+            nodeData.textContent = nodeData.children[0].textContent;
+            nodeData.children = [];
+        }
+    }
+    return nodeData;
+}
+// 新增：解析HTML片段（支持多根节点）
+function parseHTMLFragment(html) {
+    html = html.trim();
+    if (!html)
+        return [];
+    const fragmentNodes = [];
+    let remaining = html;
+    while (remaining) {
+        const tagStart = remaining.indexOf("<");
+        if (tagStart === -1) {
+            // 剩余纯文本
+            const textNode = parseSingleNode(remaining);
+            if (textNode)
+                fragmentNodes.push(textNode);
+            remaining = "";
+        }
+        else {
+            if (tagStart > 0) {
+                // 标签前的文本节点
+                const textNode = parseSingleNode(remaining.slice(0, tagStart));
+                if (textNode)
+                    fragmentNodes.push(textNode);
+                remaining = remaining.slice(tagStart);
+            }
+            else {
+                // 解析单个标签节点
+                const startTagRegex = /<([a-zA-Z0-9]+)\s*(.*?)>/;
+                const tempTagMatch = remaining.match(startTagRegex);
+                if (!tempTagMatch) {
+                    const textNode = parseSingleNode(remaining);
+                    if (textNode)
+                        fragmentNodes.push(textNode);
+                    remaining = "";
+                    continue;
+                }
+                const tempTagName = tempTagMatch[1].toLowerCase();
+                // 自闭合标签
+                if (SELF_CLOSING_TAGS.includes(tempTagName)) {
+                    const selfClosingRegex = /<([a-zA-Z0-9]+)\s*(.*?)\/?>/;
+                    const selfClosingMatch = remaining.match(selfClosingRegex);
+                    if (selfClosingMatch) {
+                        const selfNode = parseSingleNode(selfClosingMatch[0]);
+                        if (selfNode)
+                            fragmentNodes.push(selfNode);
+                        remaining = remaining.slice(selfClosingMatch[0].length).trim();
+                    }
+                    else {
+                        const textNode = parseSingleNode(remaining);
+                        if (textNode)
+                            fragmentNodes.push(textNode);
+                        remaining = "";
+                    }
+                }
+                else {
+                    // 非自闭合标签，找匹配的结束标签
+                    const tempEndTag = `</${tempTagName}>`;
+                    let tempEndIndex = -1;
+                    let tempTagCount = 1;
+                    let tempCurrentIndex = tempTagMatch[0].length;
+                    while (tempCurrentIndex < remaining.length && tempTagCount > 0) {
+                        const nextTempStart = remaining.indexOf(`<${tempTagName}`, tempCurrentIndex);
+                        const nextTempEnd = remaining.indexOf(tempEndTag, tempCurrentIndex);
+                        if (nextTempEnd === -1)
+                            break;
+                        if (nextTempStart !== -1 && nextTempStart < nextTempEnd) {
+                            tempTagCount++;
+                            tempCurrentIndex = nextTempStart + `<${tempTagName}`.length;
+                        }
+                        else {
+                            tempTagCount--;
+                            if (tempTagCount === 0)
+                                tempEndIndex = nextTempEnd;
+                            tempCurrentIndex = nextTempEnd + tempEndTag.length;
+                        }
+                    }
+                    if (tempEndIndex !== -1) {
+                        const childHTML = remaining.slice(0, tempEndIndex + tempEndTag.length);
+                        const childNode = parseSingleNode(childHTML);
+                        if (childNode)
+                            fragmentNodes.push(childNode);
+                        remaining = remaining.slice(tempEndIndex + tempEndTag.length).trim();
+                    }
+                    else {
+                        const childNode = parseSingleNode(remaining);
+                        if (childNode)
+                            fragmentNodes.push(childNode);
+                        remaining = "";
+                    }
+                }
+            }
+        }
+    }
+    // 过滤无效节点
+    return fragmentNodes.filter(Boolean);
+}
+// 核心Node类实现（支持片段/多根节点）
+class Node {
+    /**
+     * 构造函数：通过HTML字符串初始化节点（支持单根/多根）
+     * @param {string} html - HTML字符串（单根/多根均可）
+     */
+    constructor(html) {
+        _Node_instances.add(this);
+        if (typeof html !== "string") {
+            throw new Error("初始化Node必须传入HTML字符串");
+        }
+        const htmlTrimmed = html.trim();
+        if (!htmlTrimmed) {
+            throw new Error("无法解析空的HTML字符串");
+        }
+        // 尝试解析为单一节点
+        const singleNodeData = parseSingleNode(htmlTrimmed);
+        // 解析为片段（多根节点）
+        const fragmentNodeData = parseHTMLFragment(htmlTrimmed);
+        // 初始化默认属性
+        this.tagName = "";
+        this.attributes = {}; // 符合IAttributeData类型
+        this.styles = {};
+        this.textContent = "";
+        this.children = [];
+        this.parent = null;
+        // 节点核心属性赋值
+        if (singleNodeData && fragmentNodeData.length === 1) {
+            // 单根节点
+            this.tagName = singleNodeData.tagName;
+            this.attributes = { ...singleNodeData.attributes };
+            this.styles = { ...singleNodeData.styles };
+            this.textContent = singleNodeData.textContent || "";
+            // 子节点转换为Node实例
+            if (singleNodeData.children.length > 0) {
+                this.children = singleNodeData.children.map((childData) => {
+                    const childNode = new _a(__classPrivateFieldGet(this, _Node_instances, "m", _Node_generateHTMLFromData).call(this, childData));
+                    childNode.parent = this;
+                    return childNode;
+                });
+            }
+        }
+        else if (fragmentNodeData.length > 0) {
+            // 多根节点 → 标记为片段节点
+            this.tagName = "#fragment";
+            this.attributes = {}; // 符合IAttributeData类型
+            this.styles = {};
+            this.textContent = "";
+            // 片段的子节点是多个根节点
+            this.children = fragmentNodeData.map((childData) => {
+                const childNode = new _a(__classPrivateFieldGet(this, _Node_instances, "m", _Node_generateHTMLFromData).call(this, childData));
+                childNode.parent = this;
+                return childNode;
+            });
+        }
+        else {
+            throw new Error("无法解析无效的HTML字符串");
+        }
+    }
+    /**
+     * 子集管理：获取当前节点的所有子节点
+     * @returns {Node[]} 子节点数组（浅拷贝）
+     */
+    child() {
+        return [...this.children];
+    }
+    /**
+     * DOM操作：在当前节点之后插入新元素
+     * @param {string|Node} newNode - 要插入的HTML字符串或Node实例
+     * @returns {Node} 当前节点（链式调用）
+     */
+    before(newNode) {
+        if (!this.parent) {
+            throw new Error("当前节点没有父节点，无法执行before操作");
+        }
+        const nodeToInsert = __classPrivateFieldGet(this, _Node_instances, "m", _Node_convertToNode).call(this, newNode);
+        const currentIndex = this.parent.children.findIndex((child) => child === this);
+        if (currentIndex === -1) {
+            throw new Error("当前节点不在父节点的子节点列表中");
+        }
+        // 插入到当前节点前一个位置
+        this.parent.children.splice(currentIndex, 0, nodeToInsert);
+        nodeToInsert.parent = this.parent;
+        return this;
+    }
+    /**
+     * DOM操作：在当前节点之后插入新元素
+     * @param {string|Node} newNode - 要插入的HTML字符串或Node实例
+     * @returns {Node} 当前节点（链式调用）
+     */
+    after(newNode) {
+        if (!this.parent) {
+            throw new Error("当前节点没有父节点，无法执行after操作");
+        }
+        const nodeToInsert = __classPrivateFieldGet(this, _Node_instances, "m", _Node_convertToNode).call(this, newNode);
+        const currentIndex = this.parent.children.findIndex((child) => child === this);
+        if (currentIndex === -1) {
+            throw new Error("当前节点不在父节点的子节点列表中");
+        }
+        // 插入到当前节点下一个位置
+        this.parent.children.splice(currentIndex + 1, 0, nodeToInsert);
+        nodeToInsert.parent = this.parent;
+        return this;
+    }
+    /**
+     * DOM操作：在指定位置插入新元素
+     * @param {number} position - 插入位置（0 ~ children.length）
+     * @param {string|Node} newNode - 要插入的HTML字符串或Node实例
+     * @returns {Node} 当前节点（链式调用）
+     */
+    insert(position, newNode) {
+        if (typeof position !== "number" || position < 0 || position > this.children.length) {
+            throw new Error(`插入位置${position}无效，必须是0到${this.children.length}之间的整数`);
+        }
+        const nodeToInsert = __classPrivateFieldGet(this, _Node_instances, "m", _Node_convertToNode).call(this, newNode);
+        // 如果插入的是片段节点，展开其所有子节点（符合DOM标准）
+        if (nodeToInsert.tagName === "#fragment") {
+            nodeToInsert.children.forEach((child, index) => {
+                child.parent = this;
+                this.children.splice(position + index, 0, child);
+            });
+        }
+        else {
+            this.children.splice(position, 0, nodeToInsert);
+            nodeToInsert.parent = this;
+        }
+        return this;
+    }
+    /**
+     * 属性操作：获取指定属性的值
+     * @param {string} attrName - 属性名
+     * @returns {string|null} 属性值（不存在返回null）
+     */
+    getAttr(attrName) {
+        if (this.tagName === "#fragment" || this.tagName === "#text") {
+            return null; // 片段/文本节点无属性
+        }
+        if (typeof attrName !== "string") {
+            throw new Error("属性名必须是字符串");
+        }
+        // 只返回字符串类型的属性（排除styleObj）
+        return typeof this.attributes[attrName] === "string" ? this.attributes[attrName] : null;
+    }
+    /**
+     * 属性操作：设置指定属性的值
+     * @param {string} attrName - 属性名
+     * @param {string|null|undefined} value - 属性值（null/undefined删除属性）
+     * @returns {Node} 当前节点（链式调用）
+     */
+    setAttr(attrName, value) {
+        if (this.tagName === "#fragment" || this.tagName === "#text") {
+            throw new Error("片段/文本节点不支持设置属性");
+        }
+        if (typeof attrName !== "string") {
+            throw new Error("属性名必须是字符串");
+        }
+        if (value === null || value === undefined) {
+            delete this.attributes[attrName];
+        }
+        else {
+            // 确保属性值是字符串（符合IAttributeData的基础约束）
+            this.attributes[attrName] = String(value);
+        }
+        return this;
+    }
+    /**
+     * 属性操作：批量设置多个属性
+     * @param {Record<string, string | null | undefined>} attrs - 包含属性名-属性值键值对的对象
+     * @returns {Node} 当前节点（链式调用）
+     */
+    setAttrs(attrs) {
+        if (this.tagName === "#fragment" || this.tagName === "#text") {
+            throw new Error("片段/文本节点不支持设置属性");
+        }
+        if (typeof attrs !== "object" || attrs === null) {
+            throw new Error("属性对象必须是非空对象");
+        }
+        for (const [attrName, value] of Object.entries(attrs)) {
+            this.setAttr(attrName, value);
+        }
+        return this;
+    }
+    /**
+     * 样式操作：获取指定样式属性的值
+     * @param {string} styleProp - 样式属性名（支持驼峰/短横线）
+     * @returns {string|null} 样式值（不存在返回null）
+     */
+    getStyle(styleProp) {
+        if (this.tagName === "#fragment" || this.tagName === "#text") {
+            return null; // 片段/文本节点无样式
+        }
+        if (typeof styleProp !== "string") {
+            throw new Error("样式属性名必须是字符串");
+        }
+        const camelProp = kebabToCamel(styleProp);
+        return this.styles[camelProp] || this.styles[styleProp] || null;
+    }
+    /**
+     * 样式操作：设置指定样式属性的值
+     * @param {string} styleProp - 样式属性名（支持驼峰/短横线）
+     * @param {string|null|undefined} value - 样式值（null/undefined删除样式）
+     * @returns {Node} 当前节点（链式调用）
+     */
+    setStyle(styleProp, value) {
+        if (this.tagName === "#fragment" || this.tagName === "#text") {
+            throw new Error("片段/文本节点不支持设置样式");
+        }
+        if (typeof styleProp !== "string") {
+            throw new Error("样式属性名必须是字符串");
+        }
+        const camelProp = kebabToCamel(styleProp);
+        if (value === null || value === undefined) {
+            delete this.styles[camelProp];
+            delete this.styles[styleProp];
+        }
+        else {
+            this.styles[camelProp] = String(value);
+        }
+        return this;
+    }
+    /**
+     * 样式操作：批量设置多个样式属性
+     * @param {Record<string, string | null | undefined>} styles - 包含样式属性名-样式值键值对的对象
+     * @returns {Node} 当前节点（链式调用）
+     */
+    setStyles(styles) {
+        if (this.tagName === "#fragment" || this.tagName === "#text") {
+            throw new Error("片段/文本节点不支持设置样式");
+        }
+        if (typeof styles !== "object" || styles === null) {
+            throw new Error("样式对象必须是非空对象");
+        }
+        for (const [styleProp, value] of Object.entries(styles)) {
+            this.setStyle(styleProp, value);
+        }
+        return this;
+    }
+    /**
+     * 获取当前节点的完整HTML文本
+     * @returns {string} HTML字符串
+     */
+    getHtml() {
+        // 文本节点直接返回文本
+        if (this.tagName === "#text") {
+            return this.textContent;
+        }
+        // 片段节点返回所有子节点的HTML拼接
+        if (this.tagName === "#fragment") {
+            return this.children.map((child) => child.getHtml()).join("");
+        }
+        // 普通元素节点
+        let startTag = `<${this.tagName}`;
+        const attrs = { ...this.attributes };
+        // 拼接样式属性（覆盖原始style）
+        if (Object.keys(this.styles).length > 0) {
+            const styleStr = Object.entries(this.styles)
+                .map(([key, val]) => `${camelToKebab(key)}: ${val}`)
+                .join("; ");
+            attrs.style = styleStr;
+        }
+        // 拼接所有属性：过滤内部属性styleObj，确保值是字符串
+        for (const [key, val] of Object.entries(attrs)) {
+            if (key === "styleObj")
+                continue; // 核心修复：跳过内部样式对象属性
+            if (typeof val === "string") {
+                const safeVal = val.replace(/"/g, "&quot;");
+                startTag += ` ${key}="${safeVal}"`;
+            }
+        }
+        // 自闭合标签处理
+        if (SELF_CLOSING_TAGS.includes(this.tagName)) {
+            startTag += "/>";
+            return startTag;
+        }
+        startTag += ">";
+        // 拼接内容（文本+子节点HTML）
+        let content = this.textContent;
+        if (this.children.length > 0) {
+            content += this.children.map((child) => child.getHtml()).join("");
+        }
+        return `${startTag}${content}</${this.tagName}>`;
+    }
+}
+_a = Node, _Node_instances = new WeakSet(), _Node_generateHTMLFromData = function _Node_generateHTMLFromData(nodeData) {
+    if (nodeData.tagName === "#text")
+        return nodeData.textContent;
+    // 构建开始标签
+    let startTag = `<${nodeData.tagName}`;
+    const attrs = { ...nodeData.attributes };
+    // 拼接样式属性（覆盖原始style）
+    if (Object.keys(nodeData.styles).length > 0) {
+        const styleStr = Object.entries(nodeData.styles)
+            .map(([key, val]) => `${camelToKebab(key)}: ${val}`)
+            .join("; ");
+        attrs.style = styleStr;
+    }
+    // 拼接所有属性：过滤内部属性styleObj
+    for (const [key, val] of Object.entries(attrs)) {
+        if (key === "styleObj")
+            continue; // 核心修复：跳过内部样式对象属性
+        // 确保val是字符串（IAttributeData中除了styleObj都是string）
+        if (typeof val === "string") {
+            startTag += ` ${key}="${val}"`;
+        }
+    }
+    // 自闭合标签处理
+    if (SELF_CLOSING_TAGS.includes(nodeData.tagName)) {
+        startTag += "/>";
+        return startTag;
+    }
+    startTag += ">";
+    // 拼接内容（文本+子节点）
+    let content = nodeData.textContent;
+    if (nodeData.children.length > 0) {
+        content += nodeData.children.map((child) => __classPrivateFieldGet(this, _Node_instances, "m", _Node_generateHTMLFromData).call(this, child)).join("");
+    }
+    return `${startTag}${content}</${nodeData.tagName}>`;
+}, _Node_convertToNode = function _Node_convertToNode(node) {
+    if (node instanceof _a)
+        return node;
+    if (typeof node === "string")
+        return new _a(node);
+    throw new Error("插入的节点必须是HTML字符串或Node实例");
+};
+exports.default = Node;

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "parse_html_to_node",
+  "version": "0.0.1",
+  "description": "This is an HTML string parsed into an object, which does not depend on a browser environment and can be used in any JavaScript runtime.",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Easy-Martin/parse_html.git"
+  },
+  "homepage": "https://github.com/Easy-Martin/parse_html",
+  "bugs": {
+    "url": "https://github.com/Easy-Martin/parse_html/issues"
+  },
+  "keywords": [
+    "parse_html",
+    "html",
+    "parser"
+  ],
+  "author": "Huang Jingjing",
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  }
+}