Find and Replace Plugin Options

find-and-replace-plugin-options.markdown

Find and Replace Plugin Options

A Pen by Monty on CodePen.

License.

index.html

<section>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of <b>Lorem Ipsum</b>.</p>
  <a href="https://en.wikipedia.org/wiki/Lorem_ipsum">Lorem Ipsum Wikipedia Link</a>
</section>
<section>
  <p>This lorem ipsum should not be hilighted.</p>
</section>
<ul>
  <li>A Lorem Ipsum List</li>
  <li>More Elements Here</li>
</ul>

script.js

(function($) {
  $.fn.findReplace = function(options) {

    var settings = $.extend({
      // These are the defaults.
      findText: null,
      replaceText: "",
      backgroundColor: "#FFF"
    }, options);
    if (settings.findText === null) {
      alert('You have not provided a find text!');
    }
    return this.each(function() {
      var StringToFind = settings.findText;
      var regExpression = new RegExp(StringToFind, "g");
      var replacement = "<span style='background:" + settings.backgroundColor + ";'>" + settings.replaceText + "</span>";
      $(this).html(
        $(this).html().replace(regExpression, replacement)
      );
    });
  };
}(jQuery));

$("a").findReplace({
  findText: "Lorem Ipsum",
  replaceText: "I was replaced too!",
});

$("section").findReplace({
  findText: "Lorem Ipsum",
  replaceText: "Replaced text",
  backgroundColor: "#A39"
});

$("ul").findReplace({
  findText: "Lorem"
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  font-family: 'Dosis';
  font-size: 1.3em;
  width: 600px;
  text-align: justify;
  line-height: 1.8em;
}

styles

<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet" />