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: 3 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 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-27T19:45:55.000Z (about 2 years ago)
• Last Synced: 2024-04-14T21:46:12.618Z (10 months 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




[![NPM](https://img.shields.io/npm/v/hrjs)](https://www.npmjs.com/package/hrjs)

![NPM License](https://img.shields.io/npm/l/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)

![CodePen demo](https://media.giphy.com/media/l4FGuX1VuJFbENUjK/giphy.gif)

### 🪡 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.