• Stars
    star
    447
  • Rank 97,700 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿ”„ Tiny JavaScript plugin for highlighting and replacing text in the DOM

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.

More Repositories

1

numscrubberjs

โ†”๏ธ Let's change values of input numbers by dragging the mouse left & right
JavaScript
230
star
2

prognroll

[DEPRECATED] A tiny, lightweight jQuery plugin that creates scroll progress bar on the page.
JavaScript
113
star
3

toolgif

๐Ÿ’ญ The only GIF tooltip plugin you need
JavaScript
79
star
4

draweditor

๐Ÿ–Œ๏ธ Quickly draw sketches, edit images
HTML
49
star
5

tensorflowjs-webcam-transfer-learning

๐Ÿ”ฎ Tensorflowjs Webcam Transfer Learning
JavaScript
49
star
6

cambridge-cli

๐Ÿ‡ฌ๐Ÿ‡ง Terminal dictionary for English Learners
Go
42
star
7

hangmanizr

โž– Quick hangman game
JavaScript
30
star
8

dinstagram

easily download instagram images & videos with your terminal
JavaScript
21
star
9

mackernews

๐Ÿ–ฅ๏ธ A tiny Mac menu bar app that enables you to quickly access latest & most popular Hacker News stories
Go
17
star
10

colortopng

๐ŸŽจ Solid & Gradient PNG Generator
CSS
16
star
11

vuexplosive-modal

๐Ÿ”ฅ A simple Vue modal component with an explosion effect
Vue
16
star
12

clap-emoji-generator

Don't ๐Ÿ‘ stop ๐Ÿ‘๐Ÿป emphasizing ๐Ÿ‘๐Ÿผ your ๐Ÿ‘๐Ÿฝ point ๐Ÿ‘๐Ÿพ by ๐Ÿ‘๐Ÿฟ putting ๐Ÿ‘ clap ๐Ÿ‘๐Ÿป emojis ๐Ÿ‘๐Ÿผ after ๐Ÿ‘๐Ÿฝ every ๐Ÿ‘๐Ÿพ word
HTML
15
star
13

ai-profile-picture-maker

๐Ÿค– AI Profile Picture Maker
HTML
11
star
14

css3-checkbox-switch-generator

๐ŸŽŠ Turn an input checkbox into a toggle without any additional elements in a second! ๐ŸŽŠ
JavaScript
8
star
15

reactplosive-modal

๐Ÿ”ฅ A simple React modal component with an explosion effect
TypeScript
7
star
16

memorizr

Animal Pairs Game
CSS
5
star
17

twitter-trends

๐Ÿ—บ๏ธ (Currently down due to the new Twitter API policy) Discover Twitter Trends on Google Maps using Twitter API
TypeScript
5
star
18

file-system-access-api-demo

HTML
4
star
19

emoji-snake

๐Ÿ Emoji Snake
TypeScript
3
star
20

aestextic

Aesthetic Text Generator
HTML
2
star
21

badass-log-in-ui

๐Ÿคข BADass Log In UI
HTML
2
star
22

mburakerman.github.io

Personal Portfolio Website
Astro
2
star
23

tureng-api

Unofficial The Tureng Dictionary JSON API
JavaScript
2
star
24

babel-plugin-console-line

Add line information to console.log statements
JavaScript
1
star
25

firemember

๐Ÿ”ฅ Fire in the DOM
JavaScript
1
star
26

dinstagram-python

easily download instagram images & videos with your terminal using python
Python
1
star
27

toggle-hidden-files

Easily show & hide hidden files on Mac
Go
1
star
28

react-sparkly-text

โœจsparkleโœจyour texts
JavaScript
1
star