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>
capitalize
apenas retorna o texto, não altera em ponto algum, para trocar é necessário a referência ao elemento, mas sua variávelinnerHTMLs
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 comoelements[0].innerHTML = capitalize(innerHTMLs[0])
,elements[1].innerHTML = capitalize(innerHTMLs[1])
, ...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.for(var i = 0; i < innerHTMLs.length; i++){innerHTMLs[i].innerHTML = capitalize(innerHTMLs[i])}
, mas, como disse, sem sucesso na substituição.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ávelinnerHTMLs
para guardar o elemento, e não o seu conteúdo (.innerHTML
)