2

Baseando-me nessa pergunta, adaptei uma resposta específica para meu caso, criando um array com os parágrafos de interesse, onde minha intenção é capitalizar o texto presente nesses respectivos parágrafos (com algumas exceções, a exemplo de abreviaturas, preposições e números romanos).

O código funciona perfeitamente, entretanto não consigo fazer com que os resultados capitalizados substituam os anteriores (antes da capitalização) no corpo do HTML. Já removi a linha console.log, substituindo-a por um capitalize(innerHTMLs); - que funciona quando vejo o resultado no console, mas não estou conseguindo fazer essa referida substituição na página em si.

Uma coisa que descobri é que usar document.getElementsByClassName('h6').innerHTML = 'Novo valor' não funciona, a menos que eu use um ID em vez de classe.

Alguma ideia de como posso substituir o texto dos parágrafos com as classes h6 e professor pelos respectivos valores capitalizados na função capitalize()? Em outras palavras:

<p class="h6">PREPOSIÇÃO DA SILVA</p>

se transformar em

<p class="h6">Preposição da Silva</p>

Este é o código que estou usando:

var innerHTMLs = Array.prototype.slice.call(document.querySelectorAll("[class='h6'], [class='professor']")).map(function(x){return x.innerHTML});

function abreviacao(s) {
    return /^([A-Z]\.)+$/.test(s);
}

function numeralRomano(s) {
    return /^M{0,4}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$/.test(s);
}

function capitalize(texto) {
    let prepos = ["da", "do", "das", "dos", "e", "de", "à", "ao", "às", "aos", "tfc" ];
    return texto.split(' ') // quebra o texto em palavras
       .map((palavra) => { // para cada palavra
           if (abreviacao(palavra) || numeralRomano(palavra)) {
                return palavra;
           }

           palavra = palavra.toLowerCase();
           if (prepos.includes(palavra)) {
                return palavra;
           }
           return palavra.charAt(0).toUpperCase() + palavra.slice(1);
       })
       .join(' '); // junta as palavras novamente
}

innerHTMLs.forEach(t => console.log(capitalize(t)));
<p class="h6">PREPOSIÇÃO DA SILVA</p>
<p class="professor">ROMANOS IX</p>
<p class="h6">PREPOSIÇÃO DOS SANTOS</p>
<p class="professor">JOÃO PAULO II</p>
<p class="h6">INTRODUÇÃO À PRIMEIRA CARTA AOS CORÍNTIOS</p>
<p class="professor">REFERENTE AO PARÁGRAFO IV</p>

5
  • 1
    Sua função capitalize apenas retorna o texto, não altera em ponto algum, para trocar é necessário a referência ao elemento, mas sua variável innerHTMLs só contém os "textos" (na verdade os HTMLs), não as referências para os elementos, precisa alterar pra salvar elas. getElementsByClassName retorna um array de elementos, e não um elemnto, por isso o .innerHTML não funcionará, teria que iterar ele para fazer algo como elements[0].innerHTML = capitalize(innerHTMLs[0]), elements[1].innerHTML = capitalize(innerHTMLs[1]), ...
    – Costamilam
    Commented 31/08/2020 às 15:30
  • @Costamilam Primeiramente, obrigado pelo comentário! Eu já havia tentado fazer isso que você me sugeriu, usando innerHTMLs[0].innerHTML = capitalize(innerHTMLs[0]), mas sem sucesso. De fato, ocorre a capitalização no elemento que eu referencio, mas não ocorre a substituição dentro da página.
    – winiercape
    Commented 31/08/2020 às 15:47
  • Inclusive, eu havia criado um laço for(var i = 0; i < innerHTMLs.length; i++){innerHTMLs[i].innerHTML = capitalize(innerHTMLs[i])}, mas, como disse, sem sucesso na substituição.
    – winiercape
    Commented 31/08/2020 às 15:50
  • 1
    Isso porque innerHTMLs[i] não é uma referência ao elemento HTML, mas sim HTML dentro do elemento como uma string. Como eu disse, precisa adaptar a sua variável innerHTMLs para guardar o elemento, e não o seu conteúdo (.innerHTML)
    – Costamilam
    Commented 31/08/2020 às 15:56
  • @Costamilam Entendi. Vou pesquisar como fazer isso (guardar o elemento - texto - em vez do conteúdo). Obrigado!
    – winiercape
    Commented 31/08/2020 às 16:03

1 Resposta 1

3

Se você quer trocar o innerHTML de cada um dos elementos, bastaria usar o resultado de querySelectorAll (que retorna uma lista dos elementos), percorrê-los e trocar o innerHTML destes pela versão capitalizada:

document.querySelectorAll("[class='h6'], [class='professor']")
    .forEach(e => e.innerHTML = capitalize(e.innerHTML));

Exemplo completo:

function abreviacao(s) {
    return /^([A-Z]\.)+$/.test(s);
}

function numeralRomano(s) {
    return /^M{0,4}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$/.test(s);
}

function capitalize(texto) {
    let prepos = ["da", "do", "das", "dos", "e", "de", "à", "ao", "às", "aos", "tfc" ];
    return texto.split(' ') // quebra o texto em palavras
       .map((palavra) => { // para cada palavra
           if (abreviacao(palavra) || numeralRomano(palavra)) {
                return palavra;
           }

           palavra = palavra.toLowerCase();
           if (prepos.includes(palavra)) {
                return palavra;
           }
           return palavra.charAt(0).toUpperCase() + palavra.slice(1);
       })
       .join(' '); // junta as palavras novamente
}

function capitalizarTudo() {
    document.querySelectorAll("[class='h6'], [class='professor']")
        .forEach(e => e.innerHTML = capitalize(e.innerHTML));
}
<button onclick="capitalizarTudo()">Clique para capitalizar os parágrafos</button>
<p class="h6">PREPOSIÇÃO DA SILVA</p>
<p class="professor">ROMANOS IX</p>
<p class="h6">PREPOSIÇÃO DOS SANTOS</p>
<p class="professor">JOÃO PAULO II</p>
<p class="h6">INTRODUÇÃO À PRIMEIRA CARTA AOS CORÍNTIOS</p>
<p class="professor">REFERENTE AO PARÁGRAFO IV</p>

Da forma que você fez, estava apenas pegando os textos (o próprio innerHTML), passando para a função capitalize e imprimindo o resultado no console. Por isso os textos não eram alterados nos respectivos elementos.


Obs: aqui estamos levando em conta que dentro dos elementos não há outras tags (e neste caso, poderia ser inclusive usado innerText em vez de innerHTML que não faria diferença). Mas caso tenha outras tags dentro dos elementos, aí você teria que tomar cuidado para não substituir as próprias tags, seus atributos etc).

1
  • 1
    Funcionou perfeitamente, @hkotsubo! Em relação à tua observação, não há outras tags dentro dos parágrafos. Muito obrigado pela instrução e pelas dicas! Valeu!
    – winiercape
    Commented 31/08/2020 às 16:33

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