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

mip-parse-html

v1.0.2

Published

解析 HTML 代码为 MIP-HTML

Downloads

7

Readme

mip-parse-html

解析 HTML 代码为 MIP-HTML

NPM Version node version required build status test coverage

使用

安装:

npm install mip-parse-html

解析:

const ParseHTML = require('mip-parse-html');

// 配置参数
const options = {};

// 解析
const parse = new ParseHTML(content, options);

// 输出解析后的格式化代码
const html = parse.format();

// 输出解析后的压缩代码
const minhtml = parse.html();

// 输出解析后的验证结果,代码是基于 format 方法验证
// {
//     status: 'pass',// 或者 fail
//     errors: []
// }
const result = parse.validate();

配置

名称 | 说明 | 类型 | 默认值 --- | --- | --- | --- canonical | 插入页面的 <link rel="canonical" href="">如果为 null 则不处理 | stringnull | 'https://www.mipengine.org/' miplink | 自动处理添加 data-type="mip" 链接的配置列表 | Array.stringArray.RegExp | [/^\/(?!\/)/](处理以 / 开始的链接)

功能列表

  • [x] 自动修正 <!doctype html> 文档头,目前支持 未定义HTML4.1HTML5 的修正
  • [x] 自动添加 <html mip> 属性
  • [x] 自动添加 <noscript> 标签
  • [x] 自动添加 mip.css 引用
  • [x] 自动添加 mip.js 引用
  • [x] 自动添加 <meta name="viewport"> 标签
  • [x] 自动删除元素上 onxxx="" 事件属性
  • [x] 合并页面中多个 <style> 标签,并插入到 <head> 标签内的 <style mip-custom>
  • [x] 处理页面中的 <a> 标签,根据配置 options.miplink 自动处理是否添加 data-type="mip"
  • [x] 根据配置的 options.canonical 自动插入 <link rel="canonical"> 标签
  • [x] 自动抽离元素中的 style 属性,并添加随机数前插到 <style mip-custom>
  • [x] 自动移除 <script><frame><frameset><object><param> <applet><embed> 标签
  • [x] 自动替换页面中 <img> 标签为 <mip-img>
  • [x] 自动替换页面中 <video><mip-video>
  • [x] 自动替换页面中 <audio><mip-audio>
  • [x] 自动替换页面中 <iframe><mip-iframe>
  • [x] 自动替换页面中 <form><mip-form>

声明

该模块(mip-parse-html)是显式的将明显的错误进行处理,但处理后不一定完全符合 MIP-HTML 规范,并且处理之后可能导致页面中部分功能缺失(如被删除的 JS 代码功能、自动处理的样式可能存在问题),请按需修改。

License

MIT