0

É possivél selecionar palavraschave em um texto longo e linka-las?

Exemplo: Quero selecionar e linkar as palavras: burrinho e passear.

Obs: Somente 1 única vez, sem repetição de links e cada palavra para um link diferente:

    O menino quer um burrinho
    para passear.
    Um burrinho manso,
    que não corra nem pule,
    mas que saiba conversar
    O menino quer um burrinho
    para passear.

Saída:

O menino quer um **burrinho**
para **passear**.
Um burrinho manso,
que não corra nem pule,
mas que saiba conversar
O menino quer um burrinho
para passear.

Os negritos (asterísticos) são os links.

2
  • Vc precisa inserir todas as informações para receber uma resposta, o texto está onde, é sempre o mesmo texto, em qual momento vai querer "linkar" as palavras, e o que seria linkar palavras?
    – LeAndrade
    Commented 26/08/2019 às 21:06
  • O que seria "selecionar"? Como seria feita essa seleção?
    – Sam
    Commented 26/08/2019 às 21:13

2 Respostas 2

1

Você pode fazer isso sem uso de jQuery, apenas com replace, porque o replace só substitui a primeira ocorrência que encontrar.

Como a pergunta não informa como é feita a seleção das palavras, no exemplo abaixo eu criei uma array com as duas palavras e fiz um laço for para buscar cada uma e fazer a substituição por um link <a>:

let texto = `O menino quer um burrinho
    para passear.
    Um burrinho manso,
    que não corra nem pule,
    mas que saiba conversar
    O menino quer um burrinho
    para passear.`;

const palavras = "burrinho passear".split(" ");

for(let p of palavras){
   texto = texto.replace(p, `<a href="#${ p }">${ p }</a>`);
}

document.getElementById("texto").innerHTML = texto;
<div id="texto"></div>

6
  • É isso mesmo, no caso estou pegando um texto que está dentro de um span com class .texto, não estou entendendo como posso adptar esse for.
    – Rod
    Commented 27/08/2019 às 22:32
  • Conseguiu fazer?
    – Sam
    Commented 27/08/2019 às 23:13
  • Não consegui. Não estou entendendo como posso adptar já que o meu texto está dentro de uma class=texto e o for usa o let texto.
    – Rod
    Commented 28/08/2019 às 17:57
  • Seriam várias class=texto ou apenas uma?
    – Sam
    Commented 28/08/2019 às 19:45
  • Uma só <span class=texto> VÁRIOS PARÁGRAFOS AQUI DENTRO </span>
    – Rod
    Commented 29/08/2019 às 16:33
1

Você pode usar .replace para encontrar a palavra e manipula-la.

var texto = $('p').text().replace('burrinho', '<strong>burrinho</strong>').replace('passear', '<strong>passear</strong>');

$('p').html(texto);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>O menino quer um burrinho
    para passear.
    Um burrinho manso,
    que não corra nem pule,
    mas que saiba conversar
    O menino quer um burrinho
    para passear.</p>

2
  • .replace irá encontrar o primeiro valor pesquisado se for passado uma string simples, ex: utilizando 'burrinho' na pesquisa, irá funcionar apenas para a primeira palavra burrinho que encontrar. Caso queira que todas a palavras 'burrinho' sofram ação, é necessário utilizar RegEx, ex: `.replace(/burrinho/g, '<strong>burrinho</strong>') Commented 26/08/2019 às 21:30
  • Perfeito. É isso mesmo que queria.
    – Rod
    Commented 27/08/2019 às 22:14

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .