npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ucev/html-parser

v0.0.1

Published

simple html parser

Downloads

10

Readme

html-parser

简单的html解析器

这个库是为了检验我对正则表达式的掌握能力创建的。为了简化解析规则,特限定

  1. 所有标签名和属性名的命名规则为[-a-z][-a-z0-9]
  2. 所有的属性值都用双引号包围起来
  3. 字符串只使用双引号
  4. 所有标签的套嵌都是正确的
  5. style标签中间没有</style>字段
  6. 没有CDATA

完整的解析规则需要熟悉html规范,这超出我目前的能力,且对于检验正则表达式的掌握能力没有更多的益处。

用法

初始化

const parser = new Parser();

添加要解析的html文本

parser.feed('<p>a</p>');

添加事件监听

parser.subscribe(EVENT_NAME, CALLCACK);

能够监听的事件类型及回调函数

  1. start 解析开始事件,() => void
  2. end 解析结束事件,(ast: Object) => void,其中,ast是解析后的AST树
  3. text 文本解析事件, (content: String) => void,其中,content是文本节点的内容
  4. comment 注释解析事件, (content: String) => void,其中,content是注释节点的内容
  5. opentag 开标签解析事件,(tagname: String, attrs: Object) => void,其中,tagname是标签名,attrs是标签的属性
  6. closetag 闭标签解析事件,(tagname: String) => void

取消事件监听

parser.subscribe(EVENT_NAME, CALLBACK)

EVENT_NAME是事件类型,CALLBACK是添加事件监听时的函数。如果同时传了EVENT_NAME和CALLBACK,则取消对CALLBACK的回调;如果只传了EVENT_NAME,则取消EVENT_NAME的所有回调;如果都没穿,取消所有的回调。

触发解析

parser.parse()