Substitua palavras no corpo do texto

94

Existe uma maneira de substituir o texto normal em um elemento de tabela que é colocado no corpo do HTML?

Como substituir "olá" por "oi"?

Use apenas JavaScript sem jQuery .

Que seja
fonte
Você pode por gentileza ser mais específico? O que você deseja substituir, onde está no corpo, etc.
Zirak,
o corpo tem um div e dentro dele uma tabela, então eu gostaria de substituir algum texto normal, não um código como substituir ("hello") por ("hi")
quer que seja,
3
a maioria das soluções abaixo irá destruir todos os eventos e toda a estrutura dom se a palavra sendo substituída for nome da classe, nome da tag ou qualquer coisa em html
Muhammad Umer
Parece que as perguntas e as respostas estão erradas. Ele pergunta como substituir palavras e não caracteres. Tal como a substituição deste hello, this is a text randomTexthellodeve ser hi, this is a text randomTexthello. No entanto, todas as outras respostas aqui substituem os caracteres em vez de palavras.
Orhun Alp Oral

Respostas:

139

Para substituir uma string em seu HTML por outra, use o método replace em innerHTML :

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

Observe que isso substituirá a primeira instância de em hellotodo o corpo, incluindo quaisquer instâncias em seu código HTML (por exemplo, nomes de classes etc.), então use com cuidado - para obter melhores resultados, tente restringir o escopo de sua substituição, direcionando seu código usando document.getElementById ou semelhante.

Para substituir todas as instâncias da string de destino, use uma expressão regular simples com a gsinalização lobal:

document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');
Dexter
fonte
1
não funcionava para mim aqui é o que eu usei <script type="text/javascript"> window.onload = clear(); function clear() { document.body.innerHTML = document.body.replace('ü', 'n'); } </script>
wahtever
Pode ser mais complicado com caracteres estendidos - em que codificação está o seu documento? Tem certeza de que o caractere é um ü e não & # 252; por exemplo..?
Dexter,
2
você não copiou meu código com precisão ;-) certifique-se de ter innerHTML em ambos os lados da instrução, ou seja: document.body.innerHTML = document.body.innerHTML.replace ('ü', 'n');
Dexter,
3
FYI - Bug no primeiro comentário é: definido window.onload = clear;sem os parênteses "()". Ao escrever clear(), você realmente executa a função, mas deseja apenas atribuir a função ao manipulador onload
Philipp
1
Observe que o uso de innerHTML geralmente é considerado ruim hoje em dia: slideshare.net/x00mario/the-innerhtml-apocalypse
kufudo
13

A função abaixo funciona perfeitamente para mim:

// Note this *is* JQuery, see below for JS solution instead
function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  $(selector).each(function () {
    var $this = $(this);
    if (!$this.children().length)
       $this.text($this.text().replace(matcher, newText));
  });
}

Aqui está um exemplo de uso:

function replaceAllText() {
  replaceText('*', 'hello', 'hi', 'g');
}

$(document).ready(replaceAllText);
$('html').ajaxStop(replaceAllText);

Você também pode usar para fazer uma substituição direta como:

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

Mas tenha cuidado com isso, pois pode afetar as tags, css e scripts também.

EDITAR: Quanto a uma solução JavaScript pura, use este método:

function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  var elems = document.querySelectorAll(selector), i;

  for (i = 0; i < elems.length; i++)
    if (!elems[i].childNodes.length)
      elems[i].innerHTML = elems[i].innerHTML.replace(matcher, newText);
}
Ziad
fonte
Como alguém faria para substituir todo o texto em uma tag específica (como <p> ou <span>) por algum outro texto?
GJZ
Basta adicionar os nomes da tag ao primeiro parâmetro de entrada, por exemplo, replaceText ('p, span', 'hello', 'hi')
Ziad
Isso não funciona corretamente. Considere o seguinte: <p> olá <strong> mundo</✓ </p>. Olá não é substituído.
David Vielhuber
Olá, sou iniciante em codificação. Posso fazer algo de bom com AppleScript. Mas isso é tudo que sei. Você pode me dar alguns conselhos, para começar, meu objetivo é usar javascript para automatizar a coleta de bancos de dados, imagens, vídeos, preenchimento de formulários web, upload, pode ser para trabalhar com excel. Applescript está bem com ele, mas java parece estar em um nível totalmente novo e muito mais melhor. Com o que devo começar para alcançar meus objetivos. Sei 0 sobre javascript e nem sei como fazer seu script acima funcionar! Onde devo colá-lo? Muito obrigado!
Duy Duy
10

Acabei com esta função para substituir texto com segurança, sem efeitos colaterais (até agora):

function replaceInText(element, pattern, replacement) {
    for (let node of element.childNodes) {
        switch (node.nodeType) {
            case Node.ELEMENT_NODE:
                replaceInText(node, pattern, replacement);
                break;
            case Node.TEXT_NODE:
                node.textContent = node.textContent.replace(pattern, replacement);
                break;
            case Node.DOCUMENT_NODE:
                replaceInText(node, pattern, replacement);
        }
    }
}

É para casos onde os 16kB de findAndReplaceDOMTextsão um pouco pesados ​​demais.

futuro funky
fonte
Olá, sou iniciante em codificação. Posso fazer algo de bom com AppleScript. Mas isso é tudo que sei. Você pode me dar alguns conselhos, para começar, meu objetivo é usar javascript para automatizar a coleta de bancos de dados, imagens, vídeos, preenchimento de formulários web, upload, pode ser para trabalhar com excel. Applescript está bem com ele, mas java parece estar em um nível totalmente novo e muito mais melhor. Com o que devo começar para alcançar meus objetivos. Sei 0 sobre javascript e nem sei como fazer seu script acima funcionar! Onde devo colá-lo? Muito obrigado!
Duy Duy
Duy Duy, isso é um monte de problemas. Dada apenas a descrição da tarefa, é motivo suficiente para sair do trabalho.
futuro funky
9

Eu tive o mesmo problema. Eu escrevi minha própria função usando substituir no innerHTML, mas iria estragar os links de âncora e tal.

Para fazer funcionar corretamente, usei uma biblioteca para fazer isso.

A biblioteca tem uma API incrível. Depois de incluir o script, chamei-o assim:

findAndReplaceDOMText(document.body, {
  find: 'texttofind',
  replace: 'texttoreplace'
  }
);
David Silva Smith
fonte
Esta foi a única solução que funcionou para o meu problema. Eu precisava usar REGEX para localizar e substituir números de telefone em um site inteiro e outras respostas aqui quebrariam meus eventos DOM.
DavyH
3

Eu estava tentando substituir uma string muito grande e, por algum motivo, as expressões regulares estavam gerando alguns erros / exceções.

Então eu encontrei essa alternativa para expressões regulares que também funcionam muito rápido. Pelo menos foi rápido o suficiente para mim:

var search = "search string";
var replacement = "replacement string";

document.body.innerHTML = document.body.innerHTML.split(search).join(replacement)

src: Como substituir todas as ocorrências de uma string em JavaScript?

Bartho Bernsmann
fonte
2

Use a função de substituição de string javascript padrão

var curInnerHTML = document.body.innerHTML;
curInnerHTML = curInnerHTML.replace("hello", "hi");
document.body.innerHTML = curInnerHTML;
Mark Costello
fonte
1

Tente aplicar a solução sugerida acima em documentos bem grandes, substituindo strings bem curtas que podem estar presentes em innerHTML ou mesmo em innerText, e seu design de html fica quebrado na melhor das hipóteses

Portanto, em primeiro lugar, seleciono apenas elementos de nó de texto por meio de nós HTML DOM, como este

function textNodesUnder(node){
  var all = [];
  for (node=node.firstChild;node;node=node.nextSibling){
    if (node.nodeType==3) all.push(node);
    else all = all.concat(textNodesUnder(node));
  }
  return all;
}

textNodes=textNodesUnder(document.body)
for (i in textNodes) { textNodes[i].nodeValue = textNodes[i].nodeValue.replace(/hello/g, 'hi');    

`e em seguida apliquei a substituição em todos eles no ciclo

FantomX1
fonte
1

Queria adicionar um exemplo à resposta do futuro funky, pois continuava recebendo este erro:

Uncaught TypeError: element.childNodes is not iterable

use assim:

replaceInText(document.body,"search term","replacement");

não funcionou para mim com seletores jQuery.

Y Stroli
fonte
1
Se você tiver uma nova pergunta, faça-a clicando no botão Fazer pergunta . Inclua um link para esta pergunta se ajudar a fornecer contexto. - Da avaliação
SilverNak
1
Esta não é uma pergunta nova, eu estava expandindo a resposta do funky-future fornecendo um exemplo que funciona. tive que postar uma nova resposta bc não tenho representante para comentar a dele.
Y Stroli
0

Eu sou novo Javascripte comecei a aprender essas habilidades. Verifique se o método abaixo é útil para substituir o texto.

<script>

    var txt=document.getElementById("demo").innerHTML;
    var pos = txt.replace(/Hello/g, "hi")
    document.getElementById("demo").innerHTML = pos;

</script>
Manish
fonte
0

Às vezes, a alteração document.body.innerHTMLquebra alguns scripts JS na página. Aqui está a versão, que apenas altera o conteúdo dos textelementos:

function replace(element, from, to) {
    if (element.childNodes.length) {
        element.childNodes.forEach(child => replace(child, from, to));
    } else {
        const cont = element.textContent;
        if (cont) element.textContent = cont.replace(from, to);
    }
};

replace(document.body, new RegExp("hello", "g"), "hi");
Oleksandr Boiko
fonte