Skip to content

🔄 Tiny JavaScript plugin for highlighting and replacing text in the DOM

License

Notifications You must be signed in to change notification settings

mburakerman/hrjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HR.js

Tiny JavaScript plugin for highlighting and replacing text in the DOM


NPM NPM License


⏬ Install

npm install hrjs

or use CDN:

<script src="https://unpkg.com/hrjs"></script>

🪡 Usage

<p id="mytext">Lorem ipsum dolor sit amet.</p>
<script>
  new HR("#mytext", {
    highlight: "dolor",
    replaceWith: "cat",
    backgroundColor: "#B4FFEB"
  }).hr();
</script>

That's it!

CodePen demo

CodePen demo

🪡 Multiple Keywords example

You can also highlight and replace multiple keywords.

<p id="mytext">I love JavaScript.</p>
<script>
  new HR("#mytext", {
    highlight: ["love","JavaScript"],
    replaceWith: ["like", "jQuery"],
    backgroundColor: "#B4FFEB"
  }).hr();
</script>

CodePen Multiple demo

🪡 Highlight example

To highlight only, just add your keyword to highlight option.

<p class="mytext">Lorem ipsum dolor sit consectetur amet.</p>
<h3 class="mytext">Consectetur enim ipsam voluptatem quia</h3>
<script>
  new HR(".mytext", {
    highlight: "consectetur",
    backgroundColor: "#B4FFEB"
  }).hr();
</script>

CodePen Highlight demo

✅ Test

Clone project, install dependencies and run npm run test

⚙️ Customize

These are default options.

new HR("elem", {
  highlight: null,
  replaceWith: null,
  backgroundColor: "#FFDE70"
}).hr();

©️ License

Licensed under the MIT License.

About

🔄 Tiny JavaScript plugin for highlighting and replacing text in the DOM

Topics

Resources

License

Stars

Watchers

Forks