Embora seja possível resolver com regex, talvez seja mais fácil manipular o HTML usando alguma API específica para tal. Como foi dito que qualquer linguagem serve, uma opção é usar JavaScript:
let elements = document.querySelectorAll('u');
for (let u of elements) {
let parent = u.parentNode;
for (let child of u.childNodes) {
if (child.nodeType == Node.TEXT_NODE) {
child.nodeValue.split(/([çqg])/g).forEach(s => {
if (/^[çqg]$/.test(s)) {
parent.insertBefore(document.createTextNode(s), u);
} else {
let novo = document.createElement('u');
novo.appendChild(document.createTextNode(s));
parent.insertBefore(novo, u);
}
});
} else {
// não é texto, preserva do jeito que está (dentro de outro "u")
let novo = document.createElement('u');
novo.appendChild(child.cloneNode(true));
parent.insertBefore(novo, u);
}
}
parent.removeChild(u);
console.log(parent.outerHTML);
}
<p><u>Administração</u> teste</p>
<p>Outro <u>teste que agora etc...</u> lorem ipsum</p>
<p>Outro <u>teste agora <b>que</b> agora vai</u></p>
Primeiro eu obtenho todos os elementos <u>
, e para cada um eu percorro os elementos filhos, procurando algum que seja do tipo TEXT_NODE
. Se for, eu faço um split
com [çqg]
(qualquer uma destas letras), e coloco este trecho da regex entre parênteses, pois assim as letras também são retornadas no resultado final.
Depois eu percorro o resultado do split
, verificando dois casos:
- se for uma das letras
ç
, q
ou g
, eu insiro-a como um text node
- senão, eu crio outro
u
e insiro o texto
Por fim, eu insiro todos esses elementos logo antes do <u>
original (para manter a posição relativa, caso haja mais elementos irmãos no DOM), e no final eu removo o <u>
original, mantendo os novos nós criados.
Também há um else
para tratar os casos que não são text nodes (para quando há outras tags dentro do <u>
, e neste caso eu só insiro novamente o mesmo elemento, sem modificação - mas colocando-o dentro de outro u
, para que não perca a formatação).
Eu imprimi também o outerHTML
só para que você veja o HTML final, pois na renderização do browser - pelo menos para mim - não ficou muito claro que as letras ç
, g
e q
ficaram de fora das tags u
.
Repare também que no terceiro caso, o texto entre as tags <b>
não foi modificado. Eu fiz assim porque não ficou claro o que fazer neste caso. Na tag original tínhamos:
<p>Outro <u>teste agora <b>que</b> agora vai</u></p>
Então o resultado deveria ser qual das opções abaixo?
<p>Outro <u>teste a</u>g<u>ora </u><b>q</b><u><b>ue</b></u><u> a</u>g<u>ora vai</u></p>
<p>Outro <u>teste a</u>g<u>ora </u><u><b>que</b></u><u> a</u>g<u>ora vai</u></p>
Eu optei pela segunda, por ser mais simples (mas claro que é possível adaptar o código acima para tratar esses casos mais complicados).
Embora seja possível uma única regex para substituir tudo, esta não é a ferramenta mais indicada para lidar com HTML. A grande maioria das linguagens possui alguma lib (nativa ou não) para manipular HTML/XML, e com elas você consegue tratar esses casos mais complicados (como ter tags dentro de outras, comentários, campos CDATA
, etc), que com regex é bem mais difícil de tratar.
Claro que, para casos mais simples (uma tag <u>
com apenas texto dentro dela, sem nenhuma outra tag), a solução proposta pelo Andrei funciona muito bem. Uma outra alternativa à regex dele é (em PHP, que foi o que ele usou):
$texto = "<u>Administração</u>";
echo preg_replace('/[qpç]/u', '</u>$0<u>', $texto);
Ou em JavaScript:
console.log('<u>Administração</u>'.replace(/[qpç]/g, '</u>$&<u>'));
Novamente, esta regex funciona bem quando não há outras tags dentro do <u>
. Mas se tiver outra tag dentro do <u>
(como no outro exemplo acima), aí já não funciona tão bem assim. Uma string como essa:
<u>teste agora <b>que</b></u>
Se torna:
<u>teste a</u>g<u>ora <b></u>q<u>ue</b></u>
Repare no trecho <b></u>q<u>ue</b>
: fecha o u
sem fechar o b
, depois abre outro u
e fecha o b
. Bagunçou tudo. E a regex para tratar esses casos já ficaria bem mais complexa...
Cabe a você avaliar se uma regex mais simples já cobre todos os seus casos, e - tão importante quanto - se ela não gera casos inválidos. Lembre-se que uma regex manipula texto, sem se importar com a semântica e/ou estrutura do mesmo (então colocar <u>
em qualquer parte do texto é indiferente para ela), mas um HTML possui uma estrutura bem definida e você não pode adicionar qualquer coisa em qualquer lugar. Por isso uma
API específica geralmente é melhor do que a simples manipulação do texto (a não ser em casos mais simples, como já citado).
Baseado no que foi dito no seu comentário (você não quer que o sublinhado "corte" as letras), uma outra opção - caso você possa usar CSS - é usar a propriedade text-decoration-skip-ink
.
u.skip {
text-decoration-skip-ink: auto;
}
u.dontskip {
text-decoration-skip-ink: none;
}
<p><u class="skip">Com skip Administração que agora etc...</u></p>
<p><u class="dontskip">Sem skip Administração que agora etc...</u></p>
Infelizmente ainda não são todos os browsers que suportam este recurso (neste momento, apenas o Chrome e o Opera suportam). Caso o browser que você use não suporte, segue uma imagem de como fica o exemplo acima:
