@ 引用- 媒体/ html- parser

将链接、图像、资源、元数据、标题、类数、JSON-LD、样式、水合物、可见文本和内线代码从HTML中取出,放在页面上一个转接处,写成Markdown 梦想 从被询问时的相同输入。 它用mdream的活化剂来读取页面,它从来没有建立DOM,在Cloudflare Workers,Node.js,Bun,Deno,和浏览器中以平版JavaScript来运行:一个由数兆字节组成的流出页面,其内存成本大约与一个小的一样多.

安装

npm install @citation-media/html-parser @mdream/js

@mdream/js 是一个同伴依赖, ^1.7.2 或者说 ^2.0.3。 。 。 . 取消标题 一起来 head 选项. cleanHtml 以 HTML 重写器 并且只在全球范围内运行: 云旗工人, wrangler dev,以及 @cloudflare/vitest-pool-workers。 。 。 .

解析 A 页

parseHtml 只返回您想要的。 输入是作为文本的页面, a Response 因此 fetch,或一个 ReadableStream ; 反应或流被逐块读取. parseHtmlSync 对于没有承诺的文字,也要这样做.

import { parseHtml } from "@citation-media/html-parser";

const response = await fetch("https://example.com/");
const { links, images, meta } = await parseHtml(response, {
  url: response.url,
  links: { kinds: ["internal"], resources: false },
  images: true,
  meta: true,
});

readStructuredData(blocks) 将 JSON- LD 块的文本变成相同的结果, 因为您已经拥有了 。 它只检查每个块是JSON;节点是否包含搜索引擎所期望的属性,由呼叫者决定.

链接被 URL 复制,计数,并按数排序. 每个人带着自己的 text, (中文(简体) ), kind, (中文(简体) ), resource, (中文(简体) ), count,并且,在目前, rel, (中文(简体) ), target,以及 aria-label。 URL是绝对的; 路径保留它们的情况。 文本读作 DOM 的 textContent 有, 实体解码一次, 白空间崩溃 .

隐藏内容

与 hidden,每个链接、图像和标题都表示它是否包含标记隐藏的内容:a <template>页:1 <dialog> 无 open,则 hidden 属性, aria-hidden="true" 或者说 inert,或 display: none 或者说 visibility: hidden 在一个 style 属性。 这是 hidesContent(tag, attributes),导出,以及 hiddenFromReaders(tag, attributes) 这是它的 aria-hidden 财务报告和审定财务报表 inert 部分,其中未包括主要地标<main> 或者说 role="main": 开放模式对话框,如同意对话框,标出其后页 aria-hidden 片刻,不是为好,一个在那个状态中渲染和保存的一页仍然带有标记,而没有任何一页向读者隐瞒其主要内容为好. 课堂上什么也猜不到.

替换规则 true 考虑到标记中所说的,决定每个要素: (tag, attributes, byMarkup) => byMarkup && !attributes.class?.includes("popup") 保持弹出, 它可能有一个印记 (tag, attributes, byMarkup) => byMarkup || /\bsr-only\b/.test(attributes.class ?? "") 也隐藏只读屏幕的文本 。 与 positions,同一决定还告知哪些容器隐藏了它们的内容,除了这些类别之外,估计数还单独列出.

页面所重复的链接或图像只有在每次发生时才会被隐藏:一个被关闭的菜单和页眉中的标志在一目了然. 标题按页面顺序列出,包含隐藏的,所以标题大纲可以跳过或显示. <noscript> 内容是文本给指示器,从未收集.

多个需要的一次通行证

询问所有需要的页面,所以读作一次:

import { parseHtml } from "@citation-media/html-parser";

const page = await parseHtml(await fetch(url), {
  url,
  links: true,
  meta: true,
  structuredData: true,
  text: true,
  markdown: { plugins: { filter: { exclude: ["script", "style"] } } },
});

用于响应或流出 markdown,身体被读取一次,并喂食活化剂和mdream的转换器相并. 事实出自于mdream的活化剂,调制以保持白空间和CSS如页面所拥有;Markdown出自mdream的转换器不变. 在从4 KB到1.9 MB的18页上测量,所有选项加在一起,大约需要较早的HTML Rewriter传出时间的七分之一时间,而用Markdown的四分之一事实加上两次Markdown转换的事实.

头

与 head, (中文(简体) ), parseHtml 手执 <head> 读取为去首: elements 按页面顺序列出标题的元素,每个元素都有其 attributes,其卡波语 weight,则 size 以内含内容的字节表示,标题 text· ; issues 列出未标题的验证器所找到的东西,每个都带有其 rule, 取消标题的英语 message页:1 severity及其索引 element。 。 。 .

const { head } = await parseHtml(html, { url, head: true });
for (const issue of head.issues) {
  console.log(issue.rule, head.elements[issue.element ?? -1]?.attributes);
}

规则是无头的,例如 render-blocking-script, (中文(简体) ), charset-not-early, (中文(简体) ), too-many-preloads, (中文(简体) ), preload-font-crossorigin, (中文(简体) ), preconnect-missing-crossorigin, (中文(简体) ), inline-style-size, (中文(简体) ), non-absolute-canonical, (中文(简体) ), og-image-missing-dimensions,或 viewport-user-scalable。除去头部通常对它制作的标记进行排序并去除;在这里,每个元素都是自己一个重量的条目,所以规则读取了页面的顺序和标记。 关于使用Unhead的API的规则,例如 invalid-input-shape关闭. { head: { rules } } 通过 unhead 的规则配置,例如 { "too-many-preloads": ["warn", { max: 10 }] } 或者说 { "deprecated-twitter-meta": "off" }。 。 。 .

weight 是 Capo 的顺序, 因为它没有标题来计算它: 越低, 越早一个元素属于, 来自 -30 内容-安全政策 -20 以圆柱盟誓, 10 标题,和 50 用于屏蔽脚本,以至 100。一个重量低于一个的元素在它站得比它应该站得晚。 何所报取,而所言取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取.

水分

与 hydration, (中文(简体) ), parseHtml 从HTML中得知,当服务器发送时,不运行脚本,一个框架是否将浏览器中的页面水合,并测量其序列化到HTML中的数据,该数据是浏览器在页面响应输入之前处理的.

payloadBytes 计数字符,对 JSON 来说,框架写的是它的字节。 阿斯特罗的 islands 列出前200个 uid, (中文(简体) ), client 指令, component 文档, propsBytes,以及 serverRendered,这是 false 页:1 client:only 岛屿。 一个标记只计算在内线脚本的前1000个字符中,所以捆绑时没有提及. Qwik 恢复水分而不是水分 null,如同一个脚本在浏览器中渲染而无需服务器给HTML的页面一样.

第一个屏幕

与 positions,每个图像和Astro岛得到一个 position:在滚动前预计在桌面访问时,仅从标记中估算,没有浏览器. 流传的传出没有大小,所以它读出一个元素之前有多少可见的文本和多少图像,以及它是否坐落在一个隐藏的,滑动的,或者固定的容器中,只有在清楚的情况下才能回答:

文字输入 <nav> 财务报告和审定财务报表 <header>,脚本,样式,模板和隐藏容器不计数. 一个图像的位置是它第一次出现的位置.

从小公司网站WordPress和Astro到SaaS网站和一个有486个图像和岛屿的新闻门户

这么说吧 below 财务报告和审定财务报表 first-screen 是指某一元素不在或不在第一个屏幕以下的可靠说法,以及 unknown 涵盖所有元素的一半左右. 其出处顺序与所显示内容不同的布局,例如由CSS重排的网格,仍然可以错误地放置一个元素;对于确切的位置,在浏览器中进行测量.

读取页面样式

readStyles 在没有浏览器的情况下,从 CSS 文本中绘制 CSS 定义和使用内容的映射: blocks 财务报告和审定财务报表 attributes parseHtml 以 styles,以及样式表,您可以获取这些样式表,并且,在一个站点的页面中,缓存.

import { parseHtml, readStyles } from "@citation-media/html-parser";

const { styles } = await parseHtml(html, { url, styles: true });
const sheets = await Promise.all(
  styles.stylesheets.map(async (href) => ({
    css: await (await fetch(href)).text(),
    origin: href,
  }))
);
const map = readStyles([
  ...sheets,
  ...styles.blocks.map(({ css, id }) => ({
    css,
    origin: `inline#${id ?? ""}`,
  })),
  ...styles.attributes.map(({ css, element }) => ({
    css,
    element,
    origin: "attribute",
  })),
]);

读取器不是完整的 CSS 解析器: 它遵循评论,字符串, 规则, 例如 @media 财务报告和审定财务报表 @layerCSS 嵌入,保留声明的最内层选择器,跳过 @keyframes,而忽略它无法读取的内容。 无所不为:地图上写着CSS写的东西,而不是哪些元素显示出来. readDeclarations(css, origin) 返回一个样式表及其选择者和规则的平面声明.

parseColor 读取六分法, rgb(), (中文(简体) ), hsl(), (中文(简体) ), oklch(), (中文(简体) ), oklab(),并命名颜色为 SRGB; 取决于元素的颜色,例如 currentcolor 或者说 color-mix(),为 null。 。 。 . colorsIn 找到每个颜色的值, toHex 写出一个为六位数的十六进制 colorDistance 测量两种相距有多远(CIE76 in Lab: under 1,眼睛无法分辨它们).

清除页面

cleanHtml 返回 HTML而不包含您删除的内容。 EXIF和XMP块和二进制外观文本总是被去掉.

import { cleanHtml } from "@citation-media/html-parser";

const html = await cleanHtml(page, {
  url: "https://example.com/",
  remove: {
    scripts: true,
    styles: true,
    comments: true,
    cookieConsent: true,
    classes: true,
  },
  links: { kinds: ["internal"] },
  context: "main",
});

remove 接受 scripts, (中文(简体) ), styles (带有样式属性和内置SVG),, comments, (中文(简体) ), cookieConsent, (中文(简体) ), ariaHidden, (中文(简体) ), images, (中文(简体) ), classes, (中文(简体) ), ids, (中文(简体) ), meta, (中文(简体) ), linkTags,以及 hyphenation链接 links 而不成为他们的文本.

cookieConsent 由选择者删除广泛同意工具、 Borlabs Cookie、 Cookiebot、 Usercents、Complianz、 OneTrust、 Real Cookie Banner 等对话框、标语和内容阻断器 consentSelectors 列表; 列表导出给在浏览器中将同意工具从其所读取或测量内容中退出的呼叫者.

ariaHidden 删除屏幕阅读器没有获得的 : aria-hidden="true" 或者说 inert,以及仅用于屏幕阅读器的文本,例如跳过链接。 开放模式对话框, 如同意对话框, 标记其背后的页面 aria-hidden 一瞬间,不是永远的,当对话框打开时,一个页面被渲染和保存,仍然带有标记. 规则 hiddenFromReaders(tag, attributes),导出给自己读取隐藏内容的呼叫者,将主要地标(<main> 或者说 role="main"),没有任何一页对读者隐瞒;任何其他 aria-hidden 或者说 inert 元素计数为隐藏, 因为没有浏览器, 无法显示对话框是否打开 。 浏览器脚本可以添加这个条件.

标记

Markdown本身就是梦: markdown 选项将页面和选项一起交给它。 要使用Mdream的WebAssembly引擎转换,请输入 mdream 软件包,请使用同一文本.

相对的Markdown链接和图像使用完整页面 url 作为他们的基地。 例如,与 url: "https://example.com/guides/start/", (中文(简体) ), next/ 决定: https://example.com/guides/start/next/设置 markdown.origin 摧毁基地.

限制

元素以 HTML 解析器的形式打开并关闭 : <li> 财务报告和审定财务报表 <p> 关闭下一个起始点,元素在页面末尾关闭. cleanHtml 需要 HTML Rewriter, 因此它只在 Cloudflare 的运行时间运行 .

开发

开发需要节点(Node.js 22.18或以后),该节点将装载Oxlint和Oxfmt的TypeScript配置; .nvmrc 针头节点.js 24.

npm ci
npm test
npm run check
npm run build

工作测试 @cloudflare/vitest-pool-workers 和在节点,但 cleanHtml,需要 HTML 写入器.

node --expose-gc bench/parse.mjs <directory of .html files> [dist] [options as JSON] 剖析每页15次,并打印每页的中位数和总数,以比较变化与 main建设( e)npm run build 复制 dist ) (中文(简体) ). 页面不是寄存器的一部分;取几个不同大小的真页.

释放

弹出 version 内 package.json 并添加一节 CHANGELOG.md 打开 main,然后按下匹配标签,例如 v0.2.0. 发布工作流程以出处发布到npm并创建了GitHub发布.

许可证

麻省理工学院