1

Estou criando uma ferramenta para adicionar um link ao texto caso ele seja igual a um dos títulos no objeto links, estou usando replace e regex, o problema é que dessa maneira ele afeta os atributos dos elementos que contenha a texto desejado, tentei usar textContent no lugar de innerHTML, mas dessa forma o elemento a é retornado em formato de texto.

O que devo fazer para adicionar links aos textos sem que afete a integridade dos elementos HTML?

let conteudo = document.getElementById("conteudo");
let links = [
  {
    title: 'Teste',
    link: '/test.html'
  }
];

links.forEach(link => {
  conteudo.innerHTML = conteudo.innerHTML.replace(new RegExp( link.title, 'gi' ), `<a href="${link.link}">${link.title}</a>`);
});
<div id="conteudo">
  <img alt="Teste" src="/teste.jpg">
  <br><br>
  <div class="teste">
    Essa é uma frase de <span id="teste">teste</span>
  </div>
</div>

1 Resposta 1

0

Eu não tenho certeza se entendi o que você quer, mas aqui vai uma explicação sobre como transformar pedaços de texto em link, sem alterar o formato em CSS, da forma mais simples que eu conseguir!

Primeiro, você cria, no seu escopo CSS, a caracterização dos links, e tenta deixar o mais próximo do texto comum, com mesma fonte, tamanho, cor, etc. É importante especificar o máximo de coisas possíveis, porque o HTML adota um padrão já predefinido em algumas características.

Segundo, o elemento onde se encontra seu texto, seja ele uma , um ,

... enfim, o objeto onde sua string vai ficar armazenada.

É importante deixar bem claras as especificações de ID ou Class, pra que você não acabe se confundindo depois.

Terceiro, programar seu script, que vai ter apenas 3 tarefas bem claras:

  1. Receber o objeto de texto como input assim que carregado na página;
  2. Fazer um loop pelo objeto de texto e comparar com os títulos do objeto com títulos
  3. Substituir o valor que, quando comparado, retorna true.

Tendo isso explicado, segue então um modelo de script.

const keywords = 
[
{title: 'Jogos', link: 'https://pt.wikipedia.org/wiki/Desporto'}
]

function update_text(txt, id){

/// recebe txt como o corpo do texto e id como ID do texto

    let txt_elements = []
    txt_elements = txt.split(' '); // separa o texto em palavras
  
  /// loop pelos elementos do texto
  for(let i = 0; i < txt_elements.length-1; i++){
    
    if(txt_elements[i] === keywords[0].title){ // elemento bate com a pesquisa
      txt_elements.splice(i, 1, `<a class='link-pattern' href='${keywords[0].link}'>${keywords[0].title}</a>`) // modifica elementos
    }

  }
  
  txt = txt_elements.join(' '); // txt recebe elementos modificados
  document.querySelector(`#${id}`).innerHTML = txt; // muda texto em HTML para o que há dentro da variável txt
}
#test-content {
  font-family: Verdana;
  font-size: 10px;
  color: rgb(20, 20, 20)
}

.link-pattern {
  font-family: Verdana;
  font-size: 10px;
  color: rgb(20, 20, 20);
  text-decoration: none
}
<!DOCTYPE html>
<html>
<head>
    <title>Teste</title>
</head>
<body>

    <p id='test-content' onmouseover='update_text(this.innerHTML, this.id)'>Os Jogos têm crescido em escala, a ponto de quase todas as nações serem representadas. Tal crescimento tem criado inúmeros desafios, incluindo boicotes, doping, corrupção de agentes públicos e terrorismo. A cada dois anos, os Jogos Olímpicos e sua exposição à mídia proporcionam a atletas desconhecidos a chance de alcançar fama nacional e, em casos especiais, a fama internacional. Os Jogos também constituem uma oportunidade importante para a cidade e o país se promover e mostrar-se para o mundo.</p>

</body>
</html>

Pronto, a partir de agora seu código substitui automaticamente strings comuns para links :D

(Se a resposta tiver ajudado, por favor marca sua pergunta como Respondida kskssksk)

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 .