Eu criei uma função simples em JavaScript para substituir uma string qualquer por um link dentro de uma área no meu html. Até então eu passo alguns parâmetros e essa função faz um replace no meu html e inseri os links como desejado.
Porem agora estou precisando tratar alguns casos e não consegui pensar numa forma simples de resolver.
Basicamente os casos que preciso tratar é:
- Não converter a string em link quando estiver dentro de outro link.
- Não converter a string em link quando estiver como valor de um atributo das tags.
O html que realizo o find e replace, recebo assim:
<p><a class="btn" href="http://www.google.com.br/">Mecanismo de Busca</a>, loren ipsun dolor loren Google.</p>
<p>Loren ipsun dolor loren Google, loren ipsun dolor <span>Loren</span>, <b>Google</b>.</p>
<p>Acesse o <a class="btn" href="http://www.google.com.br/" title="Acesse o Google">Google</a></p>
Minha função é esta:
var jsLib = {
replaceToHref: function (word, url, target) {
var wordWithTag = '<a href="' + url + '" title="' + word + '" target="' + target + '">' + word + '</a>'
var content = document.getElementById('page-content-replace');
var result = content.innerHTML.replace(new RegExp("(\\s|\\.|\\-|^|;|\\!|\\?|\\(|\\)|\\:|\\\\)(" + word + ")(\\s|\\.|\\-|^|;|\\!|\\?|\\(|\\)|\\:|\\\\)", "g"), "$1" + wordWithTag + "$3");
content.innerHTML = result;
}
};
Considerando o html recebido e a função, ao executar e passar o link e a palavra Google, ele troca em todos os lugares, porem isto quebra o html.
Alguma sugestão de como resolver isto?