Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

HTML Streaming Editor

License: MITdocs.rsCrates.io

Run (simple) manipulations on HTML files, like extracting parts. Use CSS selectors to define which parts of the HTML to operator on, use different commands in pipes to perform the desired operations.

Syntax

The basic syntax is:

COMMAND{ SELECTOR } | COMMAND{ SELECTOR }

Some COMMAND use sub-pipelines. There are two kind of COMMANDS with this:

  • "iterate"/"forEach": For each (sub) node matching the inner selector the sub-pipeline is processed, but the elements themselves are not changed

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

    COMMAND{ SELECTOR => COMMAND{ SELECTOR } | COMMAND { SELECTOR } }

  • "map"/"replace": For each (sub) node matching the inner selector the sub-pipeline is processed, and the pipelines result is used instead of the element

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

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

The SELECTOR is a CSS selector.

Pipeline Types

There are three types of pipelines:

  • element processing pipeline: The default. You have some input HTML which you run through the pipeline
  • element creating sub-pipeline: special sub-pipeline wherever a commands adds one or more elements into the HTML tree (or into a different place of said tree)
  • string value creating sub-pipeline: special sub-pipeline wherever a commands set a string value (text content, comment, attribute value)

Commands

Currently supported element processing commands:

  • EXTRACT-ELEMENT: remove everything not matching the CSS selector (alias: ONLY)
  • REMOVE-ELEMENT: remove everything matching the CSS selector (alias: WITHOUT)
  • FOR-EACH: run a sub-pipeline on all sub-elements matching a CSS selector but return the previously selected elements (alias: WITH)
  • REPLACE-ELEMENT: replace all elements matching a CSS selector with new elements (alias: MAP)
  • CLEAR-ATTR: removes a given attribute from the previously selected elements
  • SET-ATTR: Sets a given attribute to a specified value
  • CLEAR-CONTENT: clears all children from the previously selected elements
  • SET-TEXT-CONTENT: removes previous children and replaces it with exactly one given text child
  • APPEND-TEXT-CONTENT: appends a new text child
  • PREPEND-TEXT-CONTENT: prepends a new text child
  • APPEND-COMMENT: appends a new comment child
  • PREPEND-COMMENT: prepends a new comment child
  • APPEND-ELEMENT: appends a new tag/element child
  • PREPEND-ELEMENT: prepends a new tag/element child

Currently supported element creating commands:

  • CREATE-ELEMENT: creates a new, empty element, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: NEW)
  • LOAD-FILE: reads a DOM from a different file, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: SOURCE)
  • QUERY-REPLACED: returns children matching the CSS selector of those elements meant to be replaced, only combination with or REPLACE-ELEMENT (alias: KEEP)

Currently supported string-value creating commands:

  • USE-ELEMENT: returns the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: THIS)
  • USE-PARENT: returns the parent of the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: PARENT)
  • QUERY-ELEMENT: runs a query on the currently selected element for a sub-pipeline, without detaching target element from HTML tree unlike EXTRACT-ELEMENT
  • QUERY-PARENT: runs a query on the parent of the currently selected element for a sub-pipeline
  • QUERY-ROOT: runs a query on the root of the currently selected element for a sub-pipeline
  • GET-ATTR: returns the value of an attribute of the currently selected element for a string-value producing pipelines
  • GET-TEXT-CONTENT: returns the text content of the currently selected element for a string-value producing pipelines
  • REGEX-REPLACE: runs a RegEx-based value replacements on the current string value of the pipeline
  • TO-LOWER: all-lower the current string value of the pipeline
  • TO-UPPER: all-caps the current string value of the pipeline
  • ADD-PREFIX: add a given string to the beginning of the string value of the pipeline
  • ADD-SUFFIX: add a given string to the end of the string value of the pipeline

Binary

The binary is called hse and supports following options:

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

Example

# 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

About

UNIX tools like HTML manipulation

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

HTML Streaming Editor

License: MITdocs.rsCrates.io

Run (simple) manipulations on HTML files, like extracting parts. Use CSS selectors to define which parts of the HTML to operator on, use different commands in pipes to perform the desired operations.

Syntax

The basic syntax is:

COMMAND{ SELECTOR } | COMMAND{ SELECTOR }

Some COMMAND use sub-pipelines. There are two kind of COMMANDS with this:

  • "iterate"/"forEach": For each (sub) node matching the inner selector the sub-pipeline is processed, but the elements themselves are not changed

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

    COMMAND{ SELECTOR => COMMAND{ SELECTOR } | COMMAND { SELECTOR } }

  • "map"/"replace": For each (sub) node matching the inner selector the sub-pipeline is processed, and the pipelines result is used instead of the element

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

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

The SELECTOR is a CSS selector.

Pipeline Types

There are three types of pipelines:

  • element processing pipeline: The default. You have some input HTML which you run through the pipeline
  • element creating sub-pipeline: special sub-pipeline wherever a commands adds one or more elements into the HTML tree (or into a different place of said tree)
  • string value creating sub-pipeline: special sub-pipeline wherever a commands set a string value (text content, comment, attribute value)

Commands

Currently supported element processing commands:

  • EXTRACT-ELEMENT: remove everything not matching the CSS selector (alias: ONLY)
  • REMOVE-ELEMENT: remove everything matching the CSS selector (alias: WITHOUT)
  • FOR-EACH: run a sub-pipeline on all sub-elements matching a CSS selector but return the previously selected elements (alias: WITH)
  • REPLACE-ELEMENT: replace all elements matching a CSS selector with new elements (alias: MAP)
  • CLEAR-ATTR: removes a given attribute from the previously selected elements
  • SET-ATTR: Sets a given attribute to a specified value
  • CLEAR-CONTENT: clears all children from the previously selected elements
  • SET-TEXT-CONTENT: removes previous children and replaces it with exactly one given text child
  • APPEND-TEXT-CONTENT: appends a new text child
  • PREPEND-TEXT-CONTENT: prepends a new text child
  • APPEND-COMMENT: appends a new comment child
  • PREPEND-COMMENT: prepends a new comment child
  • APPEND-ELEMENT: appends a new tag/element child
  • PREPEND-ELEMENT: prepends a new tag/element child

Currently supported element creating commands:

  • CREATE-ELEMENT: creates a new, empty element, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: NEW)
  • LOAD-FILE: reads a DOM from a different file, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: SOURCE)
  • QUERY-REPLACED: returns children matching the CSS selector of those elements meant to be replaced, only combination with or REPLACE-ELEMENT (alias: KEEP)

Currently supported string-value creating commands:

  • USE-ELEMENT: returns the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: THIS)
  • USE-PARENT: returns the parent of the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: PARENT)
  • QUERY-ELEMENT: runs a query on the currently selected element for a sub-pipeline, without detaching target element from HTML tree unlike EXTRACT-ELEMENT
  • QUERY-PARENT: runs a query on the parent of the currently selected element for a sub-pipeline
  • QUERY-ROOT: runs a query on the root of the currently selected element for a sub-pipeline
  • GET-ATTR: returns the value of an attribute of the currently selected element for a string-value producing pipelines
  • GET-TEXT-CONTENT: returns the text content of the currently selected element for a string-value producing pipelines
  • REGEX-REPLACE: runs a RegEx-based value replacements on the current string value of the pipeline
  • TO-LOWER: all-lower the current string value of the pipeline
  • TO-UPPER: all-caps the current string value of the pipeline
  • ADD-PREFIX: add a given string to the beginning of the string value of the pipeline
  • ADD-SUFFIX: add a given string to the end of the string value of the pipeline

Binary

The binary is called hse and supports following options:

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

Example

# 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

About

UNIX tools like HTML manipulation

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

HTML Streaming Editor

License: MITdocs.rsCrates.io

Run (simple) manipulations on HTML files, like extracting parts. Use CSS selectors to define which parts of the HTML to operator on, use different commands in pipes to perform the desired operations.

Syntax

The basic syntax is:

COMMAND{ SELECTOR } | COMMAND{ SELECTOR }

Some COMMAND use sub-pipelines. There are two kind of COMMANDS with this:

  • "iterate"/"forEach": For each (sub) node matching the inner selector the sub-pipeline is processed, but the elements themselves are not changed

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

    COMMAND{ SELECTOR => COMMAND{ SELECTOR } | COMMAND { SELECTOR } }

  • "map"/"replace": For each (sub) node matching the inner selector the sub-pipeline is processed, and the pipelines result is used instead of the element

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

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

The SELECTOR is a CSS selector.

Pipeline Types

There are three types of pipelines:

  • element processing pipeline: The default. You have some input HTML which you run through the pipeline
  • element creating sub-pipeline: special sub-pipeline wherever a commands adds one or more elements into the HTML tree (or into a different place of said tree)
  • string value creating sub-pipeline: special sub-pipeline wherever a commands set a string value (text content, comment, attribute value)

Commands

Currently supported element processing commands:

  • EXTRACT-ELEMENT: remove everything not matching the CSS selector (alias: ONLY)
  • REMOVE-ELEMENT: remove everything matching the CSS selector (alias: WITHOUT)
  • FOR-EACH: run a sub-pipeline on all sub-elements matching a CSS selector but return the previously selected elements (alias: WITH)
  • REPLACE-ELEMENT: replace all elements matching a CSS selector with new elements (alias: MAP)
  • CLEAR-ATTR: removes a given attribute from the previously selected elements
  • SET-ATTR: Sets a given attribute to a specified value
  • CLEAR-CONTENT: clears all children from the previously selected elements
  • SET-TEXT-CONTENT: removes previous children and replaces it with exactly one given text child
  • APPEND-TEXT-CONTENT: appends a new text child
  • PREPEND-TEXT-CONTENT: prepends a new text child
  • APPEND-COMMENT: appends a new comment child
  • PREPEND-COMMENT: prepends a new comment child
  • APPEND-ELEMENT: appends a new tag/element child
  • PREPEND-ELEMENT: prepends a new tag/element child

Currently supported element creating commands:

  • CREATE-ELEMENT: creates a new, empty element, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: NEW)
  • LOAD-FILE: reads a DOM from a different file, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: SOURCE)
  • QUERY-REPLACED: returns children matching the CSS selector of those elements meant to be replaced, only combination with or REPLACE-ELEMENT (alias: KEEP)

Currently supported string-value creating commands:

  • USE-ELEMENT: returns the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: THIS)
  • USE-PARENT: returns the parent of the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: PARENT)
  • QUERY-ELEMENT: runs a query on the currently selected element for a sub-pipeline, without detaching target element from HTML tree unlike EXTRACT-ELEMENT
  • QUERY-PARENT: runs a query on the parent of the currently selected element for a sub-pipeline
  • QUERY-ROOT: runs a query on the root of the currently selected element for a sub-pipeline
  • GET-ATTR: returns the value of an attribute of the currently selected element for a string-value producing pipelines
  • GET-TEXT-CONTENT: returns the text content of the currently selected element for a string-value producing pipelines
  • REGEX-REPLACE: runs a RegEx-based value replacements on the current string value of the pipeline
  • TO-LOWER: all-lower the current string value of the pipeline
  • TO-UPPER: all-caps the current string value of the pipeline
  • ADD-PREFIX: add a given string to the beginning of the string value of the pipeline
  • ADD-SUFFIX: add a given string to the end of the string value of the pipeline

Binary

The binary is called hse and supports following options:

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

Example

# 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

About

UNIX tools like HTML manipulation

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

HTML Streaming Editor

License: MITdocs.rsCrates.io

Run (simple) manipulations on HTML files, like extracting parts. Use CSS selectors to define which parts of the HTML to operator on, use different commands in pipes to perform the desired operations.

Syntax

The basic syntax is:

COMMAND{ SELECTOR } | COMMAND{ SELECTOR }

Some COMMAND use sub-pipelines. There are two kind of COMMANDS with this:

  • "iterate"/"forEach": For each (sub) node matching the inner selector the sub-pipeline is processed, but the elements themselves are not changed

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

    COMMAND{ SELECTOR => COMMAND{ SELECTOR } | COMMAND { SELECTOR } }

  • "map"/"replace": For each (sub) node matching the inner selector the sub-pipeline is processed, and the pipelines result is used instead of the element

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

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

The SELECTOR is a CSS selector.

Pipeline Types

There are three types of pipelines:

  • element processing pipeline: The default. You have some input HTML which you run through the pipeline
  • element creating sub-pipeline: special sub-pipeline wherever a commands adds one or more elements into the HTML tree (or into a different place of said tree)
  • string value creating sub-pipeline: special sub-pipeline wherever a commands set a string value (text content, comment, attribute value)

Commands

Currently supported element processing commands:

  • EXTRACT-ELEMENT: remove everything not matching the CSS selector (alias: ONLY)
  • REMOVE-ELEMENT: remove everything matching the CSS selector (alias: WITHOUT)
  • FOR-EACH: run a sub-pipeline on all sub-elements matching a CSS selector but return the previously selected elements (alias: WITH)
  • REPLACE-ELEMENT: replace all elements matching a CSS selector with new elements (alias: MAP)
  • CLEAR-ATTR: removes a given attribute from the previously selected elements
  • SET-ATTR: Sets a given attribute to a specified value
  • CLEAR-CONTENT: clears all children from the previously selected elements
  • SET-TEXT-CONTENT: removes previous children and replaces it with exactly one given text child
  • APPEND-TEXT-CONTENT: appends a new text child
  • PREPEND-TEXT-CONTENT: prepends a new text child
  • APPEND-COMMENT: appends a new comment child
  • PREPEND-COMMENT: prepends a new comment child
  • APPEND-ELEMENT: appends a new tag/element child
  • PREPEND-ELEMENT: prepends a new tag/element child

Currently supported element creating commands:

  • CREATE-ELEMENT: creates a new, empty element, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: NEW)
  • LOAD-FILE: reads a DOM from a different file, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: SOURCE)
  • QUERY-REPLACED: returns children matching the CSS selector of those elements meant to be replaced, only combination with or REPLACE-ELEMENT (alias: KEEP)

Currently supported string-value creating commands:

  • USE-ELEMENT: returns the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: THIS)
  • USE-PARENT: returns the parent of the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: PARENT)
  • QUERY-ELEMENT: runs a query on the currently selected element for a sub-pipeline, without detaching target element from HTML tree unlike EXTRACT-ELEMENT
  • QUERY-PARENT: runs a query on the parent of the currently selected element for a sub-pipeline
  • QUERY-ROOT: runs a query on the root of the currently selected element for a sub-pipeline
  • GET-ATTR: returns the value of an attribute of the currently selected element for a string-value producing pipelines
  • GET-TEXT-CONTENT: returns the text content of the currently selected element for a string-value producing pipelines
  • REGEX-REPLACE: runs a RegEx-based value replacements on the current string value of the pipeline
  • TO-LOWER: all-lower the current string value of the pipeline
  • TO-UPPER: all-caps the current string value of the pipeline
  • ADD-PREFIX: add a given string to the beginning of the string value of the pipeline
  • ADD-SUFFIX: add a given string to the end of the string value of the pipeline

Binary

The binary is called hse and supports following options:

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

Example

# 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

About

UNIX tools like HTML manipulation

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

HTML Streaming Editor

License: MITdocs.rsCrates.io

Run (simple) manipulations on HTML files, like extracting parts. Use CSS selectors to define which parts of the HTML to operator on, use different commands in pipes to perform the desired operations.

Syntax

The basic syntax is:

COMMAND{ SELECTOR } | COMMAND{ SELECTOR }

Some COMMAND use sub-pipelines. There are two kind of COMMANDS with this:

  • "iterate"/"forEach": For each (sub) node matching the inner selector the sub-pipeline is processed, but the elements themselves are not changed

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

    COMMAND{ SELECTOR => COMMAND{ SELECTOR } | COMMAND { SELECTOR } }

  • "map"/"replace": For each (sub) node matching the inner selector the sub-pipeline is processed, and the pipelines result is used instead of the element

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

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

The SELECTOR is a CSS selector.

Pipeline Types

There are three types of pipelines:

  • element processing pipeline: The default. You have some input HTML which you run through the pipeline
  • element creating sub-pipeline: special sub-pipeline wherever a commands adds one or more elements into the HTML tree (or into a different place of said tree)
  • string value creating sub-pipeline: special sub-pipeline wherever a commands set a string value (text content, comment, attribute value)

Commands

Currently supported element processing commands:

  • EXTRACT-ELEMENT: remove everything not matching the CSS selector (alias: ONLY)
  • REMOVE-ELEMENT: remove everything matching the CSS selector (alias: WITHOUT)
  • FOR-EACH: run a sub-pipeline on all sub-elements matching a CSS selector but return the previously selected elements (alias: WITH)
  • REPLACE-ELEMENT: replace all elements matching a CSS selector with new elements (alias: MAP)
  • CLEAR-ATTR: removes a given attribute from the previously selected elements
  • SET-ATTR: Sets a given attribute to a specified value
  • CLEAR-CONTENT: clears all children from the previously selected elements
  • SET-TEXT-CONTENT: removes previous children and replaces it with exactly one given text child
  • APPEND-TEXT-CONTENT: appends a new text child
  • PREPEND-TEXT-CONTENT: prepends a new text child
  • APPEND-COMMENT: appends a new comment child
  • PREPEND-COMMENT: prepends a new comment child
  • APPEND-ELEMENT: appends a new tag/element child
  • PREPEND-ELEMENT: prepends a new tag/element child

Currently supported element creating commands:

  • CREATE-ELEMENT: creates a new, empty element, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: NEW)
  • LOAD-FILE: reads a DOM from a different file, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: SOURCE)
  • QUERY-REPLACED: returns children matching the CSS selector of those elements meant to be replaced, only combination with or REPLACE-ELEMENT (alias: KEEP)

Currently supported string-value creating commands:

  • USE-ELEMENT: returns the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: THIS)
  • USE-PARENT: returns the parent of the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: PARENT)
  • QUERY-ELEMENT: runs a query on the currently selected element for a sub-pipeline, without detaching target element from HTML tree unlike EXTRACT-ELEMENT
  • QUERY-PARENT: runs a query on the parent of the currently selected element for a sub-pipeline
  • QUERY-ROOT: runs a query on the root of the currently selected element for a sub-pipeline
  • GET-ATTR: returns the value of an attribute of the currently selected element for a string-value producing pipelines
  • GET-TEXT-CONTENT: returns the text content of the currently selected element for a string-value producing pipelines
  • REGEX-REPLACE: runs a RegEx-based value replacements on the current string value of the pipeline
  • TO-LOWER: all-lower the current string value of the pipeline
  • TO-UPPER: all-caps the current string value of the pipeline
  • ADD-PREFIX: add a given string to the beginning of the string value of the pipeline
  • ADD-SUFFIX: add a given string to the end of the string value of the pipeline

Binary

The binary is called hse and supports following options:

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

Example

# 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

About

UNIX tools like HTML manipulation

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

HTML Streaming Editor

License: MITdocs.rsCrates.io

Run (simple) manipulations on HTML files, like extracting parts. Use CSS selectors to define which parts of the HTML to operator on, use different commands in pipes to perform the desired operations.

Syntax

The basic syntax is:

COMMAND{ SELECTOR } | COMMAND{ SELECTOR }

Some COMMAND use sub-pipelines. There are two kind of COMMANDS with this:

  • "iterate"/"forEach": For each (sub) node matching the inner selector the sub-pipeline is processed, but the elements themselves are not changed

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

    COMMAND{ SELECTOR => COMMAND{ SELECTOR } | COMMAND { SELECTOR } }

  • "map"/"replace": For each (sub) node matching the inner selector the sub-pipeline is processed, and the pipelines result is used instead of the element

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

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

The SELECTOR is a CSS selector.

Pipeline Types

There are three types of pipelines:

  • element processing pipeline: The default. You have some input HTML which you run through the pipeline
  • element creating sub-pipeline: special sub-pipeline wherever a commands adds one or more elements into the HTML tree (or into a different place of said tree)
  • string value creating sub-pipeline: special sub-pipeline wherever a commands set a string value (text content, comment, attribute value)

Commands

Currently supported element processing commands:

  • EXTRACT-ELEMENT: remove everything not matching the CSS selector (alias: ONLY)
  • REMOVE-ELEMENT: remove everything matching the CSS selector (alias: WITHOUT)
  • FOR-EACH: run a sub-pipeline on all sub-elements matching a CSS selector but return the previously selected elements (alias: WITH)
  • REPLACE-ELEMENT: replace all elements matching a CSS selector with new elements (alias: MAP)
  • CLEAR-ATTR: removes a given attribute from the previously selected elements
  • SET-ATTR: Sets a given attribute to a specified value
  • CLEAR-CONTENT: clears all children from the previously selected elements
  • SET-TEXT-CONTENT: removes previous children and replaces it with exactly one given text child
  • APPEND-TEXT-CONTENT: appends a new text child
  • PREPEND-TEXT-CONTENT: prepends a new text child
  • APPEND-COMMENT: appends a new comment child
  • PREPEND-COMMENT: prepends a new comment child
  • APPEND-ELEMENT: appends a new tag/element child
  • PREPEND-ELEMENT: prepends a new tag/element child

Currently supported element creating commands:

  • CREATE-ELEMENT: creates a new, empty element, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: NEW)
  • LOAD-FILE: reads a DOM from a different file, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: SOURCE)
  • QUERY-REPLACED: returns children matching the CSS selector of those elements meant to be replaced, only combination with or REPLACE-ELEMENT (alias: KEEP)

Currently supported string-value creating commands:

  • USE-ELEMENT: returns the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: THIS)
  • USE-PARENT: returns the parent of the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: PARENT)
  • QUERY-ELEMENT: runs a query on the currently selected element for a sub-pipeline, without detaching target element from HTML tree unlike EXTRACT-ELEMENT
  • QUERY-PARENT: runs a query on the parent of the currently selected element for a sub-pipeline
  • QUERY-ROOT: runs a query on the root of the currently selected element for a sub-pipeline
  • GET-ATTR: returns the value of an attribute of the currently selected element for a string-value producing pipelines
  • GET-TEXT-CONTENT: returns the text content of the currently selected element for a string-value producing pipelines
  • REGEX-REPLACE: runs a RegEx-based value replacements on the current string value of the pipeline
  • TO-LOWER: all-lower the current string value of the pipeline
  • TO-UPPER: all-caps the current string value of the pipeline
  • ADD-PREFIX: add a given string to the beginning of the string value of the pipeline
  • ADD-SUFFIX: add a given string to the end of the string value of the pipeline

Binary

The binary is called hse and supports following options:

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

Example

# 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

About

UNIX tools like HTML manipulation

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

HTML Streaming Editor

License: MITdocs.rsCrates.io

Run (simple) manipulations on HTML files, like extracting parts. Use CSS selectors to define which parts of the HTML to operator on, use different commands in pipes to perform the desired operations.

Syntax

The basic syntax is:

COMMAND{ SELECTOR } | COMMAND{ SELECTOR }

Some COMMAND use sub-pipelines. There are two kind of COMMANDS with this:

  • "iterate"/"forEach": For each (sub) node matching the inner selector the sub-pipeline is processed, but the elements themselves are not changed

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

    COMMAND{ SELECTOR => COMMAND{ SELECTOR } | COMMAND { SELECTOR } }

  • "map"/"replace": For each (sub) node matching the inner selector the sub-pipeline is processed, and the pipelines result is used instead of the element

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

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

The SELECTOR is a CSS selector.

Pipeline Types

There are three types of pipelines:

  • element processing pipeline: The default. You have some input HTML which you run through the pipeline
  • element creating sub-pipeline: special sub-pipeline wherever a commands adds one or more elements into the HTML tree (or into a different place of said tree)
  • string value creating sub-pipeline: special sub-pipeline wherever a commands set a string value (text content, comment, attribute value)

Commands

Currently supported element processing commands:

  • EXTRACT-ELEMENT: remove everything not matching the CSS selector (alias: ONLY)
  • REMOVE-ELEMENT: remove everything matching the CSS selector (alias: WITHOUT)
  • FOR-EACH: run a sub-pipeline on all sub-elements matching a CSS selector but return the previously selected elements (alias: WITH)
  • REPLACE-ELEMENT: replace all elements matching a CSS selector with new elements (alias: MAP)
  • CLEAR-ATTR: removes a given attribute from the previously selected elements
  • SET-ATTR: Sets a given attribute to a specified value
  • CLEAR-CONTENT: clears all children from the previously selected elements
  • SET-TEXT-CONTENT: removes previous children and replaces it with exactly one given text child
  • APPEND-TEXT-CONTENT: appends a new text child
  • PREPEND-TEXT-CONTENT: prepends a new text child
  • APPEND-COMMENT: appends a new comment child
  • PREPEND-COMMENT: prepends a new comment child
  • APPEND-ELEMENT: appends a new tag/element child
  • PREPEND-ELEMENT: prepends a new tag/element child

Currently supported element creating commands:

  • CREATE-ELEMENT: creates a new, empty element, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: NEW)
  • LOAD-FILE: reads a DOM from a different file, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: SOURCE)
  • QUERY-REPLACED: returns children matching the CSS selector of those elements meant to be replaced, only combination with or REPLACE-ELEMENT (alias: KEEP)

Currently supported string-value creating commands:

  • USE-ELEMENT: returns the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: THIS)
  • USE-PARENT: returns the parent of the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: PARENT)
  • QUERY-ELEMENT: runs a query on the currently selected element for a sub-pipeline, without detaching target element from HTML tree unlike EXTRACT-ELEMENT
  • QUERY-PARENT: runs a query on the parent of the currently selected element for a sub-pipeline
  • QUERY-ROOT: runs a query on the root of the currently selected element for a sub-pipeline
  • GET-ATTR: returns the value of an attribute of the currently selected element for a string-value producing pipelines
  • GET-TEXT-CONTENT: returns the text content of the currently selected element for a string-value producing pipelines
  • REGEX-REPLACE: runs a RegEx-based value replacements on the current string value of the pipeline
  • TO-LOWER: all-lower the current string value of the pipeline
  • TO-UPPER: all-caps the current string value of the pipeline
  • ADD-PREFIX: add a given string to the beginning of the string value of the pipeline
  • ADD-SUFFIX: add a given string to the end of the string value of the pipeline

Binary

The binary is called hse and supports following options:

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

Example

# 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

About

UNIX tools like HTML manipulation

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

HTML Streaming Editor

License: MITdocs.rsCrates.io

Run (simple) manipulations on HTML files, like extracting parts. Use CSS selectors to define which parts of the HTML to operator on, use different commands in pipes to perform the desired operations.

Syntax

The basic syntax is:

COMMAND{ SELECTOR } | COMMAND{ SELECTOR }

Some COMMAND use sub-pipelines. There are two kind of COMMANDS with this:

  • "iterate"/"forEach": For each (sub) node matching the inner selector the sub-pipeline is processed, but the elements themselves are not changed

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

    COMMAND{ SELECTOR => COMMAND{ SELECTOR } | COMMAND { SELECTOR } }

  • "map"/"replace": For each (sub) node matching the inner selector the sub-pipeline is processed, and the pipelines result is used instead of the element

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

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

The SELECTOR is a CSS selector.

Pipeline Types

There are three types of pipelines:

  • element processing pipeline: The default. You have some input HTML which you run through the pipeline
  • element creating sub-pipeline: special sub-pipeline wherever a commands adds one or more elements into the HTML tree (or into a different place of said tree)
  • string value creating sub-pipeline: special sub-pipeline wherever a commands set a string value (text content, comment, attribute value)

Commands

Currently supported element processing commands:

  • EXTRACT-ELEMENT: remove everything not matching the CSS selector (alias: ONLY)
  • REMOVE-ELEMENT: remove everything matching the CSS selector (alias: WITHOUT)
  • FOR-EACH: run a sub-pipeline on all sub-elements matching a CSS selector but return the previously selected elements (alias: WITH)
  • REPLACE-ELEMENT: replace all elements matching a CSS selector with new elements (alias: MAP)
  • CLEAR-ATTR: removes a given attribute from the previously selected elements
  • SET-ATTR: Sets a given attribute to a specified value
  • CLEAR-CONTENT: clears all children from the previously selected elements
  • SET-TEXT-CONTENT: removes previous children and replaces it with exactly one given text child
  • APPEND-TEXT-CONTENT: appends a new text child
  • PREPEND-TEXT-CONTENT: prepends a new text child
  • APPEND-COMMENT: appends a new comment child
  • PREPEND-COMMENT: prepends a new comment child
  • APPEND-ELEMENT: appends a new tag/element child
  • PREPEND-ELEMENT: prepends a new tag/element child

Currently supported element creating commands:

  • CREATE-ELEMENT: creates a new, empty element, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: NEW)
  • LOAD-FILE: reads a DOM from a different file, mainly in combination with APPEND-ELEMENT, PREPEND-ELEMENT or REPLACE-ELEMENT (alias: SOURCE)
  • QUERY-REPLACED: returns children matching the CSS selector of those elements meant to be replaced, only combination with or REPLACE-ELEMENT (alias: KEEP)

Currently supported string-value creating commands:

  • USE-ELEMENT: returns the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: THIS)
  • USE-PARENT: returns the parent of the currently selected element for a sub-pipeline, mainly in combination with "string value producing pipelines" (alias: PARENT)
  • QUERY-ELEMENT: runs a query on the currently selected element for a sub-pipeline, without detaching target element from HTML tree unlike EXTRACT-ELEMENT
  • QUERY-PARENT: runs a query on the parent of the currently selected element for a sub-pipeline
  • QUERY-ROOT: runs a query on the root of the currently selected element for a sub-pipeline
  • GET-ATTR: returns the value of an attribute of the currently selected element for a string-value producing pipelines
  • GET-TEXT-CONTENT: returns the text content of the currently selected element for a string-value producing pipelines
  • REGEX-REPLACE: runs a RegEx-based value replacements on the current string value of the pipeline
  • TO-LOWER: all-lower the current string value of the pipeline
  • TO-UPPER: all-caps the current string value of the pipeline
  • ADD-PREFIX: add a given string to the beginning of the string value of the pipeline
  • ADD-SUFFIX: add a given string to the end of the string value of the pipeline

Binary

The binary is called hse and supports following options:

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

Example

# 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

About

UNIX tools like HTML manipulation

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages