abs-html

Package Overview

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

License

Install Socket

Detect and block malicious and high-risk dependencies

Install

abs-html

Abstract HTML

latest

Source

npm

Version: 2.1.6

Version published: 4 years ago

Maintainers: 1

Created: 5 years ago

Source

ABS-HTML

将HTML转化为Ast后处理，实现HTML的无状态计算。

安装

npm i abs-html

import {
  parseHtmlToAst,
  buildAstToHtml,
  diffAst,
  patchAst,
} from 'abs-html'

使用

parseHtmlToAst(html: visit): Ast

html HTML字符串，注意，只能包含一个根节点
visit 生成节点时，可通过visit函数进行修改

const ast = parseHtmlToAst(`
  <!DOCTYPE html>
  <html>
    <head>
      <title>xxx</title>
    </head>
    <body>
      <-- comment -->
      <div class="dog">content</div>
      <div id="xx">111</div>
      <div class="cat">cat</div>
      <img src="http://xxx.com/a.jpg" />
      <div></div>
      <my-app />
    </body>
  </html>
`)

/**
[
    "!DOCTYPE",
    {
        "html": null
    },
    [
        "html",
        null,
        [
            "head",
            null,
            [
                "title",
                null,
                "xxx"
            ]
        ],
        [
            "body",
            null,
            [
                "#comment",
                null,
                " comment "
            ],
            [
                "div",
                {
                    "class": "dog"
                },
                "content"
            ],
            [
                "div",
                {
                    "id": "xx"
                },
                "111"
            ],
            [
                "div",
                {
                    "class": "cat"
                },
                "cat"
            ],
            [
                "img",
                {
                    "src": "http://xxx.com/a.jpg"
                }
            ],
            [
                "div",
                null,
                ""
            ],
            [
                "my-app"
            ]
        ]
    ]
]
*/

buildAstToHtml(ast)

const html = buildAstToHtml(ast)

/**
<!DOCTYPE html>
<html>...</html>
*/

diffAst(ast1, ast2, tiny)

查看ast2相对于ast1而言，有哪些变化。

const mutations = diffAst(ast1, ast2)

tiny: boolean 是否使用体积最小的变化记录，开启后，被记录的mutations体积会缩小30%以上，但不利于阅读

patchAst(ast, mutations, tiny?)

将mutations作用于一个ast，得到一个新的经过改变的ast。如果tiny没有传，会通过前5个mutation的属性存在情况自动判定。

const ast2 = patchAst(ast, mutations)

注意，由于diff算法的一些局限性，loose参数为true时，可能无法准确还原换行。

FAQs

What is abs-html?

Is abs-html well maintained?

Package last updated on 26 Aug 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

abs-html

ABS-HTML

安装

使用

parseHtmlToAst(html: visit): Ast

buildAstToHtml(ast)

diffAst(ast1, ast2, tiny)

patchAst(ast, mutations, tiny?)

Related posts

Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique

Identifying and Preventing Fraudulent Engineering Candidates: An Investigation into 80 Confirmed Cases