0

Estou recebendo a seguinte HTML de uma API:

  <body>
     <div class="container">
      <style>
        .g-aiPstyle0 {
            font-family: 'Sentinel SSm A', 'Sentinel SSm B', serif;
            font-size: 16px;
            line-height: 25px;
            font-weight: 400;
            font-style: normal;
            color: #323232;
        }
    </style>
      <div class="g-aiPstyle0">NOnono nono onon nonono</div>
       </div>
   </body>

Ela vem toda com uma string, gostaria de pegar essa string e tratar usando manipulacão de DOM, de forma que possa remover do elemento <style>, o atributo e seu valor de fonte: font-family: 'Sentinel SSm A', 'Sentinel SSm B', serif;;

<script>
   function removeFontSentinel(result) {
        var result = $sce.trustAsHtml(result);
            var el = document.createElement('div');
            el.innerHTML = result;
            var query = el.querySelectorAll('style')
            .forEach(function(value) {
                value.textContent.replace(/font\-family\: (\')?Sentinel(.*)serif(\;)?/gim, '');
            });
       result = el.innerHTML;
       return result; 
   }
</script>
6
  • Não é mais simples adicionar sobrescrever estilo?
    – Costamilam
    Commented 26/11/2020 às 23:30
  • Eu tenho muitas classes dinâmicas, então não teria como eu saber cada uma delas... esse é um exemplo minimalista do problema. Commented 26/11/2020 às 23:32
  • 2
    O problema do código é que o replace não altera a variável, apenas retorna o novo valor, deve ser alterado para value.textContent = value.textContent.replace(...)
    – Costamilam
    Commented 26/11/2020 às 23:42
  • Não era mais simples substituir na string original? Para que converter em árvore do DOM se você vai converter de volta para string antes de retronar?
    – bfavaretto
    Commented 27/11/2020 às 0:04
  • Valeu @Costamilam, acho que era esse o problema. Commented 30/11/2020 às 13:54

2 Respostas 2

0

Aqui está a solução que funcionou:

function removeFontSentinel(result) {
    var el = document.createElement('div');
    el.innerHTML = result;
    el.querySelectorAll('style')
    .forEach(function(value) {
        if(value.textContent.indexOf('Sentinel') != -1 || value.textContent.indexOf('Gotham') != -1 || value.textContent.indexOf('nyt-franklin') != -1) {
            value.textContent = value.textContent.replace(/font\-family\:\'Sentinel(.*)(\'\, \'Sentinel[.*]?\')?\, serif\;/gim, '');
            value.textContent = value.textContent.replace(/font\-family\:\'Gotham(.*)\'\, \'Gotham Rounded SSm B\'\, sans-serif\;/gim, '');
            value.textContent = value.textContent.replace(/font\-family\:nyt-franklin(.*)?\;/gim, '');
        }
    });
    result = el.innerHTML;
    return result; 
}
-1

Opa, o teu problema é na verdade algo bem simples!

Bom, você ta recebendo um elemento e passando ele pro HTML dentro de uma DIV, certo?

Então basta você dizer que el.style.fontFamily = '[a fonte que você quer]'

De qualquer forma, você não vai poder evitar muito ter alguma fonte estabelecida. Se quiser que seu elemento seja invisível, basta apontar que el.style.display = 'none'.

É isso, espero ter ajudado.

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 .