https://github.com/brycerussell/htmlrx
Select and manipulate elements in a HTML string without an AST
https://github.com/brycerussell/htmlrx
html htmlparser regex regexp typescript
Last synced: 8 months ago
JSON representation
Select and manipulate elements in a HTML string without an AST
- Host: GitHub
- URL: https://github.com/brycerussell/htmlrx
- Owner: BryceRussell
- License: mit
- Created: 2023-03-02T22:22:00.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-24T17:23:25.000Z (almost 3 years ago)
- Last Synced: 2025-06-06T15:03:13.621Z (9 months ago)
- Topics: html, htmlparser, regex, regexp, typescript
- Language: TypeScript
- Homepage:
- Size: 156 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# HTMLRx
Select and manipulate elements in a HTML string without an AST
> **Note**: This repo is for learning and practice, it is not meant to be a real library and is subject to change
## How to use
```ts
import { HTMLRx } from 'htmlrx`;
const html = `
Open
`
const newHTML = HTMLRx(html)
.clean() // Remove HTML comments
.select('ul') // Select first 'ul' element
// Once an element is selected you can:
// Change the element's tag and/or attributes
.modify('ol', {class: old => old + 'ordered'})
// Remove everything from inside the element
.empty()
// Remove the element from the HTML
.remove()
// or
// Return the element's attributes
.attrs()
// Return the full element as a string
.element()
// Return element's text
.text()
```
### Using `.walk()`
```ts
import { HTMLRx } from 'htmlrx`;
const html = '
Open
'
const newHTML = HTMLRx(html)
.walk(({index, name, attrs, select}) => {
// Select every element and log it to the console
select()
console.log(this.element())
})
```
## Example
```js
const html = `
Title
Paragraph 1
Paragraph 2
`
const newHTML = HTMLRx(html)
.select(null, {class: 'container'})
.modify('section', {class: 'new-class'})
.select('h1')
.modify('h2')
.select('p')
.empty()
.select('img')
.modify('figure', {class: 'image-container'})
.HTML
```
```html
Title
Paragraph 2
```