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:
- Receber o objeto de texto como input assim que carregado na página;
- Fazer um loop pelo objeto de texto e comparar com os títulos do objeto com títulos
- 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)