How to exclude jpeg names from regexp replace?

Question

I use the search function for the documentation site, which when you select a search page displays a page with selected text (just like a PDF reader or netbeans does).

To achieve the highlight, I use javascript with:

function searchHighlight(searchTxt) {
  var target = $('#page').html();
  var re = new RegExp(searchTxt, 'gi');
  target = target.replace(
    re,
    '<span class="high">' + searchTxt + '</span>'
  );
  $('#page').html(target);
}

Problem / Question:

Since the page contains images with md5-based file names, some search queries put an src image.

Searching for "1000" will distort

<img src="53451000abababababa---.jpg"

to

<img src="5334<span class="hl">1000</span>abababab--.jpg">

Is it possible to resolve this with a regular expression, somehow excluding anything to ".jpg"?

Or would it be possible before highligting replaces the images with placeholders, and after the replacement comes back to src?

Example:

• replace all <img *> with {{I-01}}, {{I-02}}, etc. and save the real src in var.
• Make the replacement above.
• {{I-01}} < img src= ".." / >

DOM- - , , , , regexp - , .

UPDATE :

function searchHighlight(searchTxt) {    
var stack = new Array();
var stackPtr = 0;
var target = $('#page').html();
//pre
target = target.replace(/<img.+?>/gi,function(match) {
  stack[stackPtr] = match;
  return '{{im' + (stackPtr++) + '}}';
});
//replace
var re = new RegExp(searchTxt, 'gi');
target = target.replace(re,'<span class="high">' + searchTxt + '</span>');
//post
stackPtr = 0;
target = target.replace(/{{im.+?}}/gi,function(match) {
    return stack[stackPtr++];
});
$('#page').html(target);
}

Answer 1

. .textContent <span> #page.

searchHighlight , searchTxt . searchTxt , span, , toggle "high" .className #page span, , searchTxt .

$(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() {
      return this.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;
}
label em {
  font-weight: bold;
  background-color: darkorange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<input type="button" value="Search" />
<input type="button" value="Reset" />
<label></label>
<div id="page" style="max-width:500px;border:1px solid #ccc;">
  <h1 style="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.
    <img style="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>