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: 1 day 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 (6 months ago)
• Default Branch: main
• Last Pushed: 2024-05-18T17:09:39.000Z (6 months ago)
• Last Synced: 2024-11-01T11:04:16.155Z (14 days ago)
• Topics: dom, interception, rich, text
• Language: TypeScript
• Homepage:
• Size: 130 KB
• Stars: 0
• 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