15 个版本 (8 个破坏性更新)

0.8.0	2023 年 5 月 13 日
0.7.1	2022 年 10 月 19 日
0.6.0	2022 年 10 月 13 日
0.0.1	2022 年 7 月 30 日

#161 in 文本编辑器

每月 47 下载

MIT 许可证

205KB
4.5K SLoC

HTML Streaming Editor

对 HTML 文件进行（简单）操作，如提取部分。使用 CSS 选择器定义要操作的 HTML 部分，使用管道中的不同命令执行所需操作。

语法

基本语法是

COMMAND{ SELECTOR } | COMMAND{ SELECTOR }

一些 COMMAND 使用子管道。有这两种 COMMANDS

"iterate"/"forEach": 对于每个匹配内部选择器的（子）节点，子管道被处理，但元素本身不会被更改

COMMAND{ SELECTOR ↦ COMMAND{ SELECTOR } | COMMAND { SELECTOR } }

COMMAND{ SELECTOR => COMMAND{ SELECTOR } | COMMAND { SELECTOR } }
"map"/"replace": 对于每个匹配内部选择器的（子）节点，子管道被处理，并且使用管道的结果代替元素

COMMAND{ SELECTOR ↤ COMMAND{ SELECTOR } | COMMAND { SELECTOR } }

COMMAND{ SELECTOR <= COMMAND{ SELECTOR } | COMMAND { SELECTOR } }

SELECTOR 是一个 CSS 选择器。

管道类型

有三种管道类型

元素处理管道：默认。你有一些输入 HTML，然后将其通过管道运行
元素创建子管道：在命令添加一个或多个元素到 HTML 树（或树的另一个位置）的特殊子管道
字符串值创建子管道：在命令设置字符串值（文本内容、注释、属性值）的特殊子管道

命令

当前支持的元素处理命令

EXTRACT-ELEMENT: 删除所有不匹配 CSS 选择器的元素（别名：ONLY）
REMOVE-ELEMENT: 删除所有匹配 CSS 选择器的元素（别名：WITHOUT）
FOR-EACH：在所有匹配CSS选择器的子元素上运行子管道，但返回之前选中的元素（别名：WITH）
REPLACE-ELEMENT：将所有匹配CSS选择器的元素替换为新元素（别名：MAP）
CLEAR-ATTR：从之前选中的元素中移除指定的属性
SET-ATTR：将指定的属性设置为指定的值
CLEAR-CONTENT：清除之前选中的元素的所有子元素
SET-TEXT-CONTENT：移除之前的孩子，并用一个给定的文本孩子替换
APPEND-TEXT-CONTENT：添加一个新的文本孩子
PREPEND-TEXT-CONTENT：添加一个新的文本孩子到前面
APPEND-COMMENT：添加一个新的注释孩子
PREPEND-COMMENT：添加一个新的注释孩子到前面
APPEND-ELEMENT：添加一个新的标签/元素孩子
PREPEND-ELEMENT：添加一个新的标签/元素孩子到前面

当前支持元素创建命令

CREATE-ELEMENT：创建一个新的空元素，主要与APPEND-ELEMENT、PREPEND-ELEMENT或REPLACE-ELEMENT结合使用（别名：NEW）
LOAD-FILE：从不同的文件读取DOM，主要与APPEND-ELEMENT、PREPEND-ELEMENT或REPLACE-ELEMENT结合使用（别名：SOURCE）
QUERY-REPLACED：返回匹配要替换的元素的CSS选择器的孩子，仅与REPLACE-ELEMENT结合使用（别名：KEEP）

当前支持字符串值创建命令

USE-ELEMENT：返回子管道中当前选定的元素，主要用于与“字符串值生成管道”结合（别名：THIS）
USE-PARENT：返回子管道中当前选定元素的父元素，主要用于与“字符串值生成管道”结合（别名：PARENT）
QUERY-ELEMENT：对子管道中当前选定的元素执行查询，与EXTRACT-ELEMENT不同，不会将目标元素从HTML树中分离
QUERY-PARENT：对子管道中当前选定元素的父元素执行查询
QUERY-ROOT：对子管道中当前选定元素的根元素执行查询
GET-ATTR：返回字符串值生成管道中当前选定元素的属性值
GET-TEXT-CONTENT：返回字符串值生成管道中当前选定元素的文本内容
REGEX-REPLACE：在管道的当前字符串值上运行基于正则表达式的值替换
TO-LOWER：将管道的当前字符串值全部转换为小写
TO-UPPER：将管道的当前字符串值全部转换为大写
ADD-PREFIX：将给定的字符串添加到管道字符串值的开头
ADD-SUFFIX：将给定的字符串添加到管道字符串值的末尾

二进制

该二进制名为hse，支持以下选项

USAGE:
    hse [OPTIONS] <PIPELINE>

ARGS:
    <PIPELINE>  Single string with the command pipeline to perform. If it starts with an @ the rest is treated as file name to read the pipeline definition from

OPTIONS:
    -h, --help               Print help information
    -i, --input <input>      File name of the Input. `-` for stdin (default)
    -o, --output <output>    File name of the Output. `-` for stdout (default)
    -V, --version            Print version information

示例

# fetches all elements with CSS class "content" inside a <main> element
hse -i index.html 'ONLY{main .content}'

# fetches the `<main>` or element with CSS class `main`, but without any `<script>` defined inside
hse -i index.html 'ONLY{main, .main} | WITHOUT{script}'

# replaces all elements with `placeholder` class with the <div class="content"> from a second HTML file 
hse -i index.html 'MAP{.placeholder ↤ SOURCE{"other.html"} | ONLY{div.content} }'

# add a new <meta name="version" value=""> element to <head> with git version info 
hse -i index.html "WITH{head ↦ APPEND-ELEMENT{ NEW{meta} | SET-ATTR{name ↤ 'version'} | SET-ATTR{content ↤ '`git describe --tags`'}  } }"

# add a new comment to <body> with git version info
hse -i index.html "WITH{body ↦ APPEND-COMMENT{'`git describe --tags`'}}"

# add an RDF <meta name="dc:title"> with same content as <title>
hse -i input.html "WITH{head ↦ APPEND-ELEMENT{ NEW{meta} | SET-ATTR{name ↤ 'dc:title' } } | WITH{meta[name='dc:title'] ↦ SET-ATTR{content ↤ QUERY-PARENT{title} | GET-TEXT-CONTENT } } }"

# replace non-word characters with an underscore in an attribute
hse -i index.html "EXTRACT-ELEMENT{#target} | SET-ATTR{data-test ↤ USE-ELEMENT | GET-ATTR{data-test} | REGEX-REPLACE{'\\W' ↤ '_'} }"

# run the pipeline defined in file `file.hsp` on content of `index.html`
hse -i index.html @file.hsp

依赖项

~7–18MB
~236K SLoC