Remplacer du texte par un lien dans jQuery

Question

J'essaie de remplacer une petite partie de texte dans un document HTML volumineux par mon propre élément que je crée à la volée.

Le texte peut être une grande quantité de texte, html, images, quoi que ce soit, et ce que je veux est de trouver la première (ou la totalité) la position d'une certaine chaîne, et le remplacer par un élément créer en utilisant $('< span>').

en utilisant de simples text.replace('the string', $('< span>')); ne pas faire l'affaire (je suis parti avec [object Object] et non la < span> réelle que je veux.

La raison pour laquelle je ne suis pas simplement injecter HTML directe est parce que je veux conserver tous les liens qui sont liés à l'objet que je crée et faire un remplacement avec un ID personnalisé, puis attacher des liens à l'ID après que le HTML a été modifié, semble un peu sale

Merci pour l'aide! :)

Answer 1

Vous plus que voulez probablement le mettez en surbrillance le plugin et modifiez simplement pour envelopper un lien si vous le souhaitez.

http://www.unwrongest.com/projects/highlight/

Answer 2

Ce n'est pas si simple. Une fois que vous avez récupéré text() vous avez juste une chaîne simple avec aucune information de noeud d'élément, ainsi faire des remplacements dessus ne changera pas le DOM HTML du tout.

Ce que vous avez à faire est de rechercher chaque noeud Text dans l'arborescence, un par un. Et malheureusement, jQuery ne fournit pas beaucoup d'aide pour traiter les nœuds de texte. Vous pouvez utiliser la fonction findText à this question. Cet usage remplacerait chaque « la chaîne » avec un vide <span>:

findText(document.body, /the string/g, function(node, match) { 
    var span= document.createElement('span'); 
    node.splitText(match.index+match[0].length); 
    node.data= node.data.slice(0, match.index); 
    node.parentNode.insertBefore(span, node.nextSibling); 
}); 

(. Si vous avez besoin de trouver du texte entre les différents nœuds de texte et des éléments, qui est un much more complicated proposition)

Answer 3

Pour une solution simple

Si vous avez besoin d'un élément plus élaboré, vous devez ajouter l'élément sur la position souhaitée.

$("<span/>").appendTo(element); 

Comme dans votre exemple, il remplace le texte object.toString()