https://github.com/bosens-china/dom-interception
Extract dom elements and rich text
https://github.com/bosens-china/dom-interception
dom interception rich text
Last synced: 4 months ago
JSON representation
Extract dom elements and rich text
- Host: GitHub
- URL: https://github.com/bosens-china/dom-interception
- Owner: bosens-China
- License: mit
- Created: 2024-05-06T02:48:22.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-18T17:09:39.000Z (about 2 years ago)
- Last Synced: 2025-11-18T01:17:15.283Z (6 months ago)
- Topics: dom, interception, rich, text
- Language: TypeScript
- Homepage:
- Size: 130 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# dom-interception
[中文文档](./README_ZH.md)
Intercept the content of DOM elements or rich text editors without losing the hierarchical structure.
When do you need it?
Imagine a scenario where content needs to be restricted, for example, only allowing more content to be viewed after payment. For security reasons, it may be necessary to layer the content. This tool can help you achieve that.
## Usage
```txt
npm i dom-interception
```
```txt
yarn i dom-interception
```
```txt
pnpm i dom-interception
```
```js
import { domInterception } from "dom-interception";
const text = `
Protocol
Welcome.
`;
const div = document.createElement("div");
div.innerHTML = text;
const { text: t, dom } = domInterception(div, { length: 5 });
console.log(t); // ProtocolWelcome
console.log(dom.innerHTML); //
Protocol
Welcome
```
## Options
```js
export interface Options {
length?: number;
fill?: boolean;
}
```
### length
- type: number
The length to be intercepted. By default, it does not intercept and returns all content.
### fill
- type: `boolean`
- default: `true`
Whether to fill the intercepted content to exactly match the length. For example, if length is set to 200 and fill is true, it will intercept exactly 200 characters.
If false, it will remove the exceeding nodes. You can see the following test example.
- fill `false`
```js
import { domInterception } from "dom-interception";
const text = `
Protocol
Updated: September 10, 2023
Effective: September 15, 2023
Welcome.
`;
const div = document.createElement("div");
div.innerHTML = text;
const { text: t, dom } = domInterception(div, { length: 10, fill: false });
console.log(t); // Protocol
console.log(dom.innerHTML); //
Protocol
```
- fill `true`
```js
import { domInterception } from "dom-interception";
const text = `
Protocol
Updated: September 10, 2023
Effective: September 15, 2023
Welcome.
`;
const div = document.createElement("div");
div.innerHTML = text;
const { text: t, dom } = domInterception(div, { length: 10 });
console.log(t); // Protocol Updated: Sep
console.log(dom.innerHTML); //
Protocol
Updated: Sep
```
## Usage in Node
```js
import { nodeInterception } from "dom-interception/node";
const div = `
Protocol
Updated: September 10, 2023
Effective: September 15, 2023
Welcome.
`;
const div = `
test
`;
const result = nodeInterception(div);
expect(result.text).toBe("test");
expect(result.dom.nodeName).toBe("H1");
```
## License
MIT