hrjs

    1.0.2 • Public • Published

    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://rawgit.com/mburakerman/hrjs/master/src/hr.js"></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!

    CodePen demo

    CodePen demo

    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> 

    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

    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.

    Install

    npm i hrjs

    DownloadsWeekly Downloads

    56

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • mburakerman