1

Considerando que eu tenho classes aleatórias, podendo ou não ter uma classe no parágrafo. Eu preciso colocar um parágrafo vazio, quando não houver um parágrafo vazio em cima do texto. Eu poderei receber textos nestes três formatos, sendo que o único que deverá receber um parágrafo a mais é o texto 3, pois ele não possui um parágrafo vazio em cima.

Obs: (com ou sem style e classe), o problema acontece por causa disso.

texto 1:

<p  class="blablabla" style="" ></p>
<p>Nono nonono nonononono </p>

texto 2:

<p  class="blobloblo">&nbsp;</p>
<p>Nono nonono nonononono </p>

texto 3:

<p  class="blublublu" style="" ><span>nono nonono no</span></p>
<p>Nono nonono nonononono </p>

Aqui está o método que eu tenho, só que tem um problema, ele não está pegando somente o primeiro parágrafo, daí eu não sei o que fazer para ele fazer o match só do primeiro parágrafo:

$scope.trustAsHtml = function(string) {    
    var result = $sce.trustAsHtml(string);
    if (angular.isDefined(result)) {   
        result = result.replace(/\n/gim, '');
        if (!result.match(/^<p(.*)?>(\s|&nbsp;)<\/p>/gim)) {
            result = '<p class="paragraph-added"></p>' + result;
        }
        return result;
    }
}; 
11
  • Eu não entendi o motivo da negativa... está bem claro o que preciso. Para qualquer um entender. Commented 18/11/2019 às 17:29
  • Essa pergunta eu também não entendi o negativo, mas na outra talvez negativaram porque é de infra do google. E o pior que vou passar pela mesma situação sua, na outra pergunta, porque pretendo usar o webview para exibir conteúdo meu hospedado e agora fiquei sabendo que google vai me bloquear por conta da nova politica deles. Commented 18/11/2019 às 18:12
  • O meu caso é que tem duas empresas que se uniram virando uma só, daí temos que juntar duas arquiteturas diferentes no mesmo app, na outra pergunta que fui negativado. Commented 18/11/2019 às 18:25
  • 2
    "Juntar duas arquiteturas no mesmo app": ok, isso realmente torra bastante a paciência, mas normalmente se faz isso criando uma camada de abstração de resgate de dados, então ele mastiga os dados para um modelo de dados padronizado útil para o app Commented 18/11/2019 às 18:32
  • Ao invés de regex se usasse DOMParser com var el = domparsed.getElementsByTag('p'); e checar se existe o primeiro paragrafo el[0] é vazio com el[0].textContent.trim() == '', já seria bem mais simples, então se não existir bastaria um var novo = document.createElement('p'); p.innerHTML = '&nbsp;'; domparsed.insertBefore(novo, domparsed.firstChild);
    – Syzoth
    Commented 18/11/2019 às 18:36

1 Resposta 1

2

Conforme sugestão do @GuilhermeNascimento, eu cheguei em uma solução:

var el = document.createElement('div');
    el.innerHTML = result;

   var paragraphs = el.getElementsByTagName('p');
   if (paragraphs.length && paragraphs[0].innerHTML != '' && paragraphs[0].innerHTML != '&nbsp;') {
      var novo = document.createElement('p'); 
          novo.setAttribute('class', 'paragraph-added')
          novo.innerHTML = '&nbsp;'; 
          el.insertBefore(novo, el.firstChild);
    }
    result = el.innerHTML;
    return result;
2
  • Sugestão no if: if (paragraphs.length && !paragraphs[0].textContent.trim()) {, se não necessitar de retrocompatibilidade (navegadores antigos como IE) String.prototype.trim
    – Syzoth
    Commented 18/11/2019 às 19:29
  • Não posso usar textContent porque ali vai ter conteúdo com <span>..., mas obrigado pelas dicas, vc ajudou muito. Eu sempre esqueço de pensar que trabalhar com DOM é muito mais prático e adequado. Commented 19/11/2019 às 14:42

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 .