mburakerman / Hrjs
Licence: mit
🔄 Tiny JavaScript plugin for highlighting and replacing text in the DOM
Stars: ✭ 420
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Hrjs
texthighlighter
a no dependency typescript npm package for highlighting user selected text
Stars: ✭ 17 (-95.95%)
Mutual labels: dom, highlight
Js Tracker
A chrome extension tracks front-end JavaScript that uses DOM / jQuery APIs to manipulate html dom elements (e.g., change style, attach event listener) at runtime.
Stars: ✭ 387 (-7.86%)
Mutual labels: dom
Highlightjs Line Numbers.js
Line numbering plugin for Highlight.js
Stars: ✭ 323 (-23.1%)
Mutual labels: highlight
Highlighter.js
Easily navigate the DOM and highlight the elements - http://720kb.github.io/highlighter.js/
Stars: ✭ 370 (-11.9%)
Mutual labels: dom
Three Elements
Web Components-powered custom HTML elements for building Three.js-powered games and interactive experiences. 🎉
Stars: ✭ 331 (-21.19%)
Mutual labels: dom
Via.js
Write JS code that runs in a different context. E.g. use the DOM in a Web Worker.
Stars: ✭ 412 (-1.9%)
Mutual labels: dom
Eslint Plugin Testing Library
ESLint plugin to follow best practices and anticipate common mistakes when writing tests with Testing Library
Stars: ✭ 384 (-8.57%)
Mutual labels: dom
Html Dom
This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.
Stars: ✭ 4,269 (+916.43%)
Mutual labels: dom
Plain Draggable
The simple and high performance library to allow HTML/SVG element to be dragged.
Stars: ✭ 362 (-13.81%)
Mutual labels: dom
Ngx Meta
Dynamic page title & meta tags utility for Angular (w/server-side rendering)
Stars: ✭ 331 (-21.19%)
Mutual labels: dom
Anglesharp
👼 The ultimate angle brackets parser library parsing HTML5, MathML, SVG and CSS to construct a DOM based on the official W3C specifications.
Stars: ✭ 4,018 (+856.67%)
Mutual labels: dom
Dsync
IDAPython plugin that synchronizes disassembler and decompiler views
Stars: ✭ 399 (-5%)
Mutual labels: highlight
Scrollmonitor
A simple and fast API to monitor elements as you scroll
Stars: ✭ 3,250 (+673.81%)
Mutual labels: dom
Franklin.jl
(yet another) static site generator. Simple, customisable, fast, maths with KaTeX, code evaluation, optional pre-rendering, in Julia.
Stars: ✭ 413 (-1.67%)
Mutual labels: highlight
HR.js
Tiny JavaScript plugin for highlighting and replacing text in the DOM
Install
Include hr.js file:
<script src="src/hr.js"></script>
or use CDN:
<script src="https://unpkg.com/hrjs"></script>
Usage
<p id="mytext">Lorem ipsum dolor sit amet.</p>
Activate
<script>
new HR("#mytext", {
highlight: "dolor",
replaceWith: "cat",
backgroundColor: "#B4FFEB"
}).hr();
</script>
That's it!
Multiple
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>
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>
Customize
These are default options.
new HR("elem", {
highlight: null,
replaceWith: null,
backgroundColor: "#FFDE70"
}).hr();
Support
- IE 10+
- Chrome
- Firefox
- Safari
- Opera
License
Licensed under the MIT License.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].