Início / coding / Perguntas / 77940986
Accepted
Raphael10
Asked: 2024-02-05 20:36:52 +0800 CST

Como alterar programaticamente o estilo de uma única palavra de um parágrafo HTML?

  • 772

Gostaria de alterar programaticamente o estilo de uma única palavra de um parágrafo HTML

let textToSearch = "testing"

let beforeNode = document.createElement('p');
let afterNode = document.createElement('p');

let highlightedSpan = document.createElement('span')
highlightedSpan.innerHTML = textToSearch;
highlightedSpan.style.backgroundColor = "yellow"
let newPar = document.createElement('p');
newPar.appendChild(highlightedSpan);

document.querySelectorAll('p').forEach((par) => {
  let cont = par.textContent;
  let startingPos = cont.indexOf(textToSearch)
  console.log(startingPos)
  if (startingPos !== -1) {
    let firstPart = cont.slice(0, startingPos - 1)
    let thirdPart = cont.slice(startingPos + textToSearch.length, cont.length - 1)
    beforeNode.appendChild(document.createTextNode(firstPart))
    afterNode.appendChild(document.createTextNode(thirdPart))
    par.replaceWith(beforeNode, highlightedSpan, afterNode)
  }
})
<p> A complete text for testing purposes</p>

Eu recebo esta saída:

insira a descrição da imagem aqui

Mas gostaria de entender se existe uma maneira visualmente melhor (agora o conteúdo do texto está visualmente espalhado em três linhas) e mais limpa de alterar o estilo de uma única palavra de um parágrafo HTML

javascript

1 respostas

  1. Best Answer

    Basta usar regex para substituir a palavra por uma palavra agrupada em um intervalo:

    const BODY = document.body;
BODY.innerHTML = BODY.innerHTML.replace('testing', `<span>testing</span>`);
    span {
  background-color: yellow;
}
    <p> A complete text for testing purposes</p>

    • 1

relate perguntas