https://github.com/mburakerman/hrjs
🔄 Tiny JavaScript plugin for highlighting and replacing text in the DOM
https://github.com/mburakerman/hrjs
dom highlight highlight-text javascript replace-text
Last synced: 12 months ago
JSON representation
🔄 Tiny JavaScript plugin for highlighting and replacing text in the DOM
- Host: GitHub
- URL: https://github.com/mburakerman/hrjs
- Owner: mburakerman
- License: mit
- Created: 2017-04-20T16:04:51.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-27T19:45:55.000Z (over 3 years ago)
- Last Synced: 2024-04-14T21:46:12.618Z (almost 2 years ago)
- Topics: dom, highlight, highlight-text, javascript, replace-text
- Language: JavaScript
- Homepage: https://mburakerman.github.io/hrjs/
- Size: 138 KB
- Stars: 447
- Watchers: 14
- Forks: 26
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: License.txt
Awesome Lists containing this project
README
# HR.js
> Tiny JavaScript plugin for highlighting and replacing text in the DOM
[](https://www.npmjs.com/package/hrjs)
## ⏬ Install
```js
npm install hrjs
```
or use CDN:
```html
```
## 🪡 Usage
```html
Lorem ipsum dolor sit amet.
```
```html
new HR("#mytext", {
highlight: "dolor",
replaceWith: "cat",
backgroundColor: "#B4FFEB"
}).hr();
```
That's it!
[CodePen demo](https://codepen.io/anon/pen/ZKWBYV)
### 🪡 Multiple Keywords example
You can also highlight and replace multiple keywords.
```html
I love JavaScript.
```
```html
new HR("#mytext", {
highlight: ["love","JavaScript"],
replaceWith: ["like", "jQuery"],
backgroundColor: "#B4FFEB"
}).hr();
```
[CodePen Multiple demo](https://codepen.io/anon/pen/XRdNbw)
### 🪡 Highlight example
To highlight only, just add your keyword to `highlight` option.
```html
Lorem ipsum dolor sit consectetur amet.
Consectetur enim ipsam voluptatem quia
```
```html
new HR(".mytext", {
highlight: "consectetur",
backgroundColor: "#B4FFEB"
}).hr();
```
[CodePen Highlight demo](https://codepen.io/anon/pen/Vbampm)
## ✅ Test
Clone project, install dependencies and run `npm run test`
## ⚙️ Customize
These are default options.
```js
new HR("elem", {
highlight: null,
replaceWith: null,
backgroundColor: "#FFDE70"
}).hr();
```
## ©️ License
Licensed under the MIT License.