4

Estou convertendo HTML para doc, e me apareceu um problema bem específico.

Palavras que contêm as letras q, g e ç quando sublinhadas, estão ficando com um resultado indesejado.

Eu pensei em resolver da seguinte forma:

<u>Administração</u>
<!-- Esperado -->
<u>Administra</u>ç<u>ão</u>

É possível e como fazer com regex?

Estou aberto à sugestões.

  • A solução pode ser escrita em qualquer linguagem
  • Estou convertendo o HTML -> doc com Libre Office
  • O HTML está limitado a não usar estilos/css
4
  • 1
    O objetivo é ter as palavras sublinhadas às metades ? Isso parece meio estranho. Não seria melhor retirar o sublinhado por completo ?
    – Isac
    17/07/2019 às 11:41
  • Remover o sublinhado por completo não é uma alternativa. O objetivo é esse mesmo que foi descrito, tirando o sublinhado das letras q, g e ç a leitura fica mais agradável, pq o risco do sublinhado está cortando os "rabinhos/pezinhos" dessas letras. Acredito que uma das resposta dadas já resolverá, com tempo hoje eu testo.
    – Skywalker
    17/07/2019 às 12:00
  • Um dia (quando todos os browsers implementarem o suporte full) será possível usar isso
    – hkotsubo
    17/07/2019 às 12:48
  • 1
    Considere marcar a resposta do @hkotsubo como correta. Pelos comentários, todas as dúvidas foram sanadas e ela me parece estar bem completa. 27/07/2019 às 18:02

2 Respostas 2

4

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:

inserir a descrição da imagem aqui

2
  • Pelo resultado obtido com a função "executar" o código aqui do stack, acredito que a solução será essa, assim que possível vou testar no meu código.
    – Skywalker
    17/07/2019 às 12:04
  • @Skywalker Fiz uma alteração no primeiro código, vi que tinha um caso que falhava.
    – hkotsubo
    17/07/2019 às 12:15
2

Acredito que você quer isso:

$texto = "<u>Administração</u>";

echo preg_replace('/([qpç]+)/u', '</u>$1<u>', $texto);

Essa REGEX funcionará caso tenha ou não os caracteres mencionados.

8
  • 2
    No caso das opções serem apenas uma letra, é mais simples usar [qpç]. De qualquer forma, acho que vale mencionar que isso só funciona caso a tag u não tenha nenhuma outra tag dentro dela - pois se tiver, o resultado final será um HTML inválido: regex101.com/r/IolPTb/1 (claro que essa situação não é mencionada pelo AP, mas vai saber...) :-)
    – hkotsubo
    17/07/2019 às 1:26
  • 1
    O @hkotsubo tem razão, erro meu em não deixar mais observações, mas essa resposta agrega a questão. Obrigado.
    – Skywalker
    17/07/2019 às 12:06
  • 1
    @hkotsubo valeu! Vou editar! 17/07/2019 às 15:34
  • 1
    @hkotsubo não sabia da flag U, eu estava tentando fazer um enconde para utf8... kkk Valeu! 17/07/2019 às 15:35
  • 1
    Só lembrando que a flag é u minúsculo. O U maiúsculo também existe, mas faz outra coisa: php.net/manual/en/reference.pcre.pattern.modifiers.php
    – hkotsubo
    17/07/2019 às 16:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .