Howto Exclude Jpeg-names From Regexp Replace?

I'm using a search-function for a documentation site which upon selection of search hit shows page with text highlighted (just as a pdf-reader or netbeans would do). To achive the

Solution 1:

One approach would be to create an array of all possible valid search terms. Set the terms as .textContent of <span> elements within #page parent element.

At searchHighlight function check if searchTxt matches an element within array. If searchTxt matches an element of array, select span element using index of matched array element, toggle "high".className at matched #page span element, else notify user that searchTxt does not match any valid search terms.

$(function() {
  var words = [];
  var input = $("input[type=text]");
  var button = $("input[type=button][value=Search]");
  var reset = $("input[type=button][value=Reset]");
  var label = $("label");
  var page = $("#page");
  var contents = $("h1, p", page).contents()
    .filter(function() {
      returnthis.nodeType === 3 && /\w+/.test(this.nodeValue)
    }).map(function(i, text) {
      var span = text.nodeValue.split(/\s/).filter(Boolean)
        .map(function(word, index) {
          words.push(word);
          return"<span>" + word + "</span> "
        });
      $(text.parentElement).find(text).replaceWith(span);
    })
  var spans = $("span", page);
  button.on("click", function(event) {
    spans.removeClass("high");
    label.html("");
    if (input.val().length && /\w+/.test(input.val())) {
      var terms = input.val().match(/\w+/g);
      var indexes = $.map(terms, function(term) {
        var search = $.map(words, function(word, index) {
          return word.toLowerCase().indexOf(term.toLowerCase()) > -1 && index
        }).filter(Boolean);
        return search
      });
      if (indexes.length) {
        $.each(indexes, function(_, index) {
          spans.eq(index).addClass("high")
        })
      } else {
        label.html("Search term <em>" + input.val() + "</em> not found.");
      }
    }
  });
  reset.on("click", function(event) {
    spans.removeClass("high");
    input.val("");
    label.html("");
  })
})

.high {
  background-color: #caf;
}
labelem {
  font-weight: bold;
  background-color: darkorange;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" /><inputtype="button"value="Search" /><inputtype="button"value="Reset" /><label></label><divid="page"style="max-width:500px;border:1px solid #ccc;"><h1style="margin:0px;">test of replace</h1><p>After Luke comes to Dagobah, Yoda initially withholds his true identity. He’s trying to get a sense of who Luke is as a person; Yoda understands that there’s a lot at risk in training Luke to be a Jedi, especially considering what happened with his
    father.
    <imgstyle="float:right;"width="200"src="http://a.dilcdn.com/bl/wp-content/uploads/sites/6/2013/11/04-400x225.jpg">And Yoda is not impressed — Luke is impatient and selfish. With “Adventure. Excitement. A Jedi craves not these things,” the Jedi Master makes clear that Luke must understand the significance and meaning of the journey he thinks he wants to make.
    It’s an important lesson for Luke and for audiences, because when Luke faces Vader at the film’s climax, we see the stakes involved in the life of a Jedi</p><p>Now Yoda-search works, however a search on "sites" will break the image-link. (Yes, I know this implementation isn't perfect but I'm dealing with reality)</p></div>