Estou usando uma função de pesquisa para um site de documentação que, após a seleção do hit da pesquisa, mostra a página com o texto realçado (como faria um leitor de PDF ou o NetBeans).

Para obter o destaque, eu uso javascript com:

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);
}

Problema / pergunta:

Como a página contém imagens com nomes de arquivos baseados em md5, algumas pesquisas alteram a imagem src.

A pesquisa em "1000" distorcerá o

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

para

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

É possível resolver isso com o regexp, excluindo de alguma forma algo anjcent para ".jpg"?

Ou seria possível, antes da alta marcação, substituir as imagens por espaços reservados e, após a substituição, reverter para src?

Exemplo:

substitua todos <img *> por {{I-01}}, {{I-02}} etc e mantenha o src real em uma var.Faça a substituição acima.Reverta de {{I-01}} para <img src = ".." />

A manipulação do DOM é obviamente uma opção, mas acho que isso poderia ser feito com o regexp de alguma forma; no entanto, minhas habilidades no regexp estão faltando muito.

ATUALIZAR Este código funciona para mim agora:

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);
}