├── .gitignore
├── .eslintrc.js
├── package.json
├── License.txt
├── test
    └── hr.test.js
├── README.md
└── src
    ├── hr.min.js
    └── hr.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     commonjs: true,
 5 |     es2021: true,
 6 |     amd: true,
 7 |     jest: true
 8 |   },
 9 |   extends: [
10 |     'standard'
11 |   ],
12 |   parserOptions: {
13 |     ecmaVersion: 'latest'
14 |   },
15 |   rules: {
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hrjs",
 3 |   "version": "1.5.7",
 4 |   "description": "> Tiny JavaScript plugin for highlighting and replacing text in the DOM",
 5 |   "main": "src/hr.min.js",
 6 |   "scripts": {
 7 |     "test": "jest"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/mburakerman/hrjs.git"
12 |   },
13 |   "keywords": [],
14 |   "author": "mburakerman",
15 |   "license": "MIT",
16 |   "bugs": {
17 |     "url": "https://github.com/mburakerman/hrjs/issues"
18 |   },
19 |   "homepage": "https://github.com/mburakerman/hrjs#readme",
20 |   "devDependencies": {
21 |     "@testing-library/jest-dom": "^5.16.4",
22 |     "eslint": "^8.16.0",
23 |     "eslint-config-standard": "^17.0.0",
24 |     "eslint-plugin-import": "^2.26.0",
25 |     "eslint-plugin-n": "^15.2.0",
26 |     "eslint-plugin-promise": "^6.0.0",
27 |     "jest": "^24.9.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/License.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Mehmet Burak Erman
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/test/hr.test.js:
--------------------------------------------------------------------------------
 1 | const HR = require('../src/hr.js')
 2 | 
 3 | describe('HR.js', () => {
 4 |   test('highlight backgroundColor should match', async () => {
 5 |     const defaultText = 'lorem ipsum dolor sit amet.'
 6 |     document.body.innerHTML = `<p id="test-1">${defaultText}</p>`
 7 | 
 8 |     new HR('#test-1', {
 9 |       highlight: defaultText
10 |     }).hr()
11 | 
12 |     const testElement = document.getElementById('test-1')
13 |     expect(testElement.children[0].style.backgroundColor).toBe('rgb(255, 222, 112)')
14 |   })
15 | 
16 |   test('replaceWith & backgroundColor values should match', async () => {
17 |     const defaultText = 'black'
18 |     const replacedText = 'white'
19 |     document.body.innerHTML = `<p id="test-2">${defaultText}</p>`
20 | 
21 |     new HR('#test-2', {
22 |       highlight: defaultText,
23 |       replaceWith: replacedText,
24 |       backgroundColor: 'rgb(180, 255, 235)'
25 |     }).hr()
26 | 
27 |     const testElement = document.getElementById('test-2')
28 |     expect(testElement.textContent).toBe(replacedText)
29 |     expect(testElement.children[0].style.backgroundColor).toBe('rgb(180, 255, 235)')
30 |   })
31 | 
32 |   test('array of items replace should match', async () => {
33 |     const defaultText = 'cat bird'
34 |     const replacedText = 'dog unicorn'
35 |     document.body.innerHTML = `<p id="test-3">${defaultText}</p>`
36 | 
37 |     new HR('#test-3', {
38 |       highlight: defaultText.split(' '),
39 |       replaceWith: replacedText.split(' '),
40 |       backgroundColor: 'rgb(0, 255, 235)'
41 |     }).hr()
42 | 
43 |     const testElement = document.getElementById('test-3')
44 |     expect(testElement.textContent.trim()).toBe(replacedText)
45 |   })
46 | })
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # HR.js
  2 | 
  3 | > Tiny JavaScript plugin for highlighting and replacing text in the DOM
  4 | 
  5 | <br />
  6 | 
  7 | [![NPM](https://img.shields.io/npm/v/hrjs)](https://www.npmjs.com/package/hrjs)
  8 | ![NPM License](https://img.shields.io/npm/l/hrjs)
  9 | 
 10 | <br />
 11 | 
 12 | ## ⏬ Install
 13 | 
 14 | ```js
 15 | npm install hrjs
 16 | ```
 17 | 
 18 | or use CDN:
 19 | ```html
 20 | <script src="https://unpkg.com/hrjs"></script>
 21 | ```
 22 | 
 23 | 
 24 | 
 25 | ## 🪡 Usage
 26 | 
 27 | ```html
 28 | <p id="mytext">Lorem ipsum dolor sit amet.</p>
 29 | ```
 30 | 
 31 | ```html
 32 | <script>
 33 |   new HR("#mytext", {
 34 |     highlight: "dolor",
 35 |     replaceWith: "cat",
 36 |     backgroundColor: "#B4FFEB"
 37 |   }).hr();
 38 | </script>
 39 | ```
 40 | That's it!
 41 | 
 42 | [CodePen demo](https://codepen.io/anon/pen/ZKWBYV)
 43 | 
 44 | ![CodePen demo](https://media.giphy.com/media/l4FGuX1VuJFbENUjK/giphy.gif)
 45 | 
 46 | 
 47 | 
 48 | ### 🪡 Multiple Keywords example
 49 | 
 50 | You can also highlight and replace multiple keywords.
 51 | 
 52 | ```html
 53 | <p id="mytext">I love JavaScript.</p>
 54 | ```
 55 | 
 56 | ```html
 57 | <script>
 58 |   new HR("#mytext", {
 59 |     highlight: ["love","JavaScript"],
 60 |     replaceWith: ["like", "jQuery"],
 61 |     backgroundColor: "#B4FFEB"
 62 |   }).hr();
 63 | </script>
 64 | ```
 65 | [CodePen Multiple demo](https://codepen.io/anon/pen/XRdNbw)
 66 | 
 67 | 
 68 | 
 69 | ### 🪡 Highlight example
 70 | 
 71 | To highlight only, just add your keyword to `highlight` option.
 72 | 
 73 | ```html
 74 | <p class="mytext">Lorem ipsum dolor sit consectetur amet.</p>
 75 | <h3 class="mytext">Consectetur enim ipsam voluptatem quia</h3>
 76 | ```
 77 | 
 78 | ```html
 79 | <script>
 80 |   new HR(".mytext", {
 81 |     highlight: "consectetur",
 82 |     backgroundColor: "#B4FFEB"
 83 |   }).hr();
 84 | </script>
 85 | ```
 86 | [CodePen Highlight demo](https://codepen.io/anon/pen/Vbampm)
 87 | 
 88 | 
 89 | ## ✅ Test
 90 | Clone project, install dependencies and run `npm run test`
 91 | 
 92 | 
 93 | ## ⚙️ Customize
 94 | 
 95 | These are default options.
 96 | 
 97 | ```js
 98 | new HR("elem", {
 99 |   highlight: null,
100 |   replaceWith: null,
101 |   backgroundColor: "#FFDE70"
102 | }).hr();
103 | ```
104 | 
105 | 
106 | ## ©️ License
107 | 
108 | Licensed under the MIT License.
109 | 


--------------------------------------------------------------------------------
/src/hr.min.js:
--------------------------------------------------------------------------------
1 | function _classPrivateMethodInitSpec (i, t) { _checkPrivateRedeclaration(i, t), t.add(i) } function _checkPrivateRedeclaration (i, t) { if (t.has(i)) throw new TypeError('Cannot initialize the same private elements twice on an object') } function _classPrivateMethodGet (i, t, e) { if (!t.has(i)) throw new TypeError('attempted to get private field on non-instance'); return e }!(function () { const i = new WeakSet(); class t {constructor (t, e = {}) { _classPrivateMethodInitSpec(this, i), this.el = document.querySelectorAll(t), this.options = e, this.defaultOptions = { highlight: null, replaceWith: null, backgroundColor: 'rgb(255, 222, 112)' } }hr () { for (let s = 0; s < this.el.length; s++) { var t, n, o, h; if (((t = this.options) === null || void 0 === t || !t.replaceWith) && (n = this.options) !== null && void 0 !== n && n.highlight) { if (Array.isArray(this.options.highlight)) for (let i = 0; i < this.options.highlight.length; i++) this.el[s].innerHTML = this.el[s].innerHTML.replace(new RegExp('(' + this.options.highlight[i] + ')', 'gi'), '<span data-hr>$1</span>'); else this.el[s].innerHTML = this.el[s].innerHTML.replace(new RegExp('(' + this.options.highlight + ')', 'i'), '<span data-hr>$1</span>'); _classPrivateMethodGet(this, i, e).call(this, this.el[s]) } if ((o = this.options) !== null && void 0 !== o && o.highlight && this.options.highlight !== null && (h = this.options) !== null && void 0 !== h && h.replaceWith && this.options.replaceWith !== null) { if (Array.isArray(this.options.highlight) && Array.isArray(this.options.replaceWith)) for (let i = 0; i < this.options.highlight.length; i++) void 0 !== this.options.replaceWith[i] && (this.el[s].innerHTML = this.el[s].innerHTML.replace(new RegExp(this.options.highlight[i], 'gi'), '<span data-hr>' + this.options.replaceWith[i] + '</span>')); else this.el[s].innerHTML = this.el[s].innerHTML.replace(new RegExp(this.options.highlight, 'gi'), '<span data-hr>' + this.options.replaceWith + '</span>'); _classPrivateMethodGet(this, i, e).call(this, this.el[s]) } } }} function e (i) { const t = i.querySelectorAll('[data-hr]'); for (let i = 0; i < t.length; i++) { var e; t[i].style.backgroundColor = this.defaultOptions.backgroundColor, (e = this.options) !== null && void 0 !== e && e.backgroundColor && (t[i].style.backgroundColor = this.options.backgroundColor) } } typeof module !== 'undefined' && void 0 !== module.exports ? module.exports = t : typeof define === 'function' && define.amd ? define([], () => t) : window.HR = t }())
2 | 


--------------------------------------------------------------------------------
/src/hr.js:
--------------------------------------------------------------------------------
 1 | /* HR.js | https://mburakerman.github.io/hrjs/ | @mburakerman | License: MIT */
 2 | /**
 3 |   * @param el - The element you want to target.
 4 |   * @param options - This is an object that contains the options.
 5 | */
 6 | (function () {
 7 |   class HR {
 8 |     constructor (el, options = {}) {
 9 |       this.el = document.querySelectorAll(el)
10 |       this.options = options
11 |       this.defaultOptions = {
12 |         highlight: null,
13 |         replaceWith: null,
14 |         backgroundColor: 'rgb(255, 222, 112)'
15 |       }
16 |     }
17 | 
18 |     #setBackgroundColor (selector) {
19 |       const dataHR = selector.querySelectorAll('[data-hr]')
20 |       for (let i = 0; i < dataHR.length; i++) {
21 |         dataHR[i].style.backgroundColor = this.defaultOptions.backgroundColor
22 |         if (this.options?.backgroundColor) {
23 |           dataHR[i].style.backgroundColor = this.options.backgroundColor
24 |         }
25 |       }
26 |     }
27 | 
28 |     hr () {
29 |       for (let i = 0; i < this.el.length; i++) {
30 |         if (!this.options?.replaceWith && this.options?.highlight) {
31 |           if (Array.isArray(this.options.highlight)) {
32 |             for (let m = 0; m < this.options.highlight.length; m++) {
33 |               this.el[i].innerHTML = this.el[i].innerHTML.replace(new RegExp('(' + this.options.highlight[m] + ')', 'gi'), '<span data-hr>$1</span>')
34 |             }
35 |           } else {
36 |             this.el[i].innerHTML = this.el[i].innerHTML.replace(new RegExp('(' + this.options.highlight + ')', 'i'), '<span data-hr>$1</span>')
37 |           }
38 | 
39 |           this.#setBackgroundColor(this.el[i])
40 |         }
41 | 
42 |         if ((this.options?.highlight && this.options.highlight !== null) && (this.options?.replaceWith && this.options.replaceWith !== null)) {
43 |           if (Array.isArray(this.options.highlight) && Array.isArray(this.options.replaceWith)) {
44 |             for (let n = 0; n < this.options.highlight.length; n++) {
45 |               if (typeof this.options.replaceWith[n] !== 'undefined') {
46 |                 this.el[i].innerHTML = this.el[i].innerHTML.replace(new RegExp(this.options.highlight[n], 'gi'), '<span data-hr>' + this.options.replaceWith[n] + '</span>')
47 |               }
48 |             }
49 |           } else {
50 |             this.el[i].innerHTML = this.el[i].innerHTML.replace(new RegExp(this.options.highlight, 'gi'), '<span data-hr>' + this.options.replaceWith + '</span>')
51 |           }
52 | 
53 |           this.#setBackgroundColor(this.el[i])
54 |         }
55 |       }
56 |     }
57 |   }
58 | 
59 |   if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
60 |     module.exports = HR
61 |   } else if (typeof define === 'function' && define.amd) {
62 |     define([], () => HR)
63 |   } else {
64 |     window.HR = HR
65 |   }
66 | }())
67 | 


--------------------------------------------------------------------------------