Rechercher des mots, Remplacer Liens

Question

J'ai un tableau comme celui-ci

var words = [ 
    { 
     word: 'Something', 
     link: 'http://www.something.com' 
    }, 
    { 
     word: 'Something Else', 
     link: 'http://www.something.com/else' 
    } 
]; 

Je veux qu'il recherche sur la page pour mot et le remplacer par lien. Existe-t-il un moyen efficace de le faire? Il semble que le CPU ait faim.

Désolé aurait dû exlained plus ...

Il recherche chaque élément avec le .message de classe par exemple. Ensuite, trouvez tous les mots à l'intérieur de cela.

Il y aurait aussi quelques centaines dans ce tableau

Answer 1

Il serait possible de le faire avec quelque chose comme:

$('*:contains("string to find")'); 

le problème avec cette approche est que « * » renverra tous les éléments qui contient la chaîne, y compris HTML, BODY, etc ... et après que vous avez encore besoin de trouver la chaîne dans le nœud de texte de chaque élément, il peut être plus facile d'aller vérifier chaque nœud de texte ...

Je vous suggère de jeter un oeil à la highlight plugin qui fait déjà quelque chose de très similaire à ce que vous voulez (au lieu de lien, il met en évidence tout texte sur une page), mais à partir du source code, il semble assez facile de le changer.

Answer 2

Une bonne stratégie est:

1) Créer un objet dont les clés sont les phrases pour remplacer et dont les valeurs sont les liens pour les remplacer par.

2) Tout en faisant cela, construire une expression régulière qui peut correspondre à l'une des touches, puis

3) Utilisez cette regex à l'échelle mondiale remplacer.

exemple rugueux:

var replacementDict = { 
    'foo': 'http://www.foo.com/', 
    'bar': 'http://www.bar.net/' 
}; 
var theRegex = /\b(foo|bar)\b/g; 
theText.replace(theRegex, function(s, theWord) { 
    return "<a href='" + replacementDict[theWord] + "'>" + theWord + "</a>"; 
}); 

Answer 3

Étant donné un contenu comme:

<div class="message">Somethsg1</div> 
    <div class="message">Something</div> 
    <div class="message">Ssething</div> 
    <div class="message">Something Else</div> 
    <div class="message">Something da</div> 
    <div class="message">Somethin2g</div> 

Vous pouvez utiliser quelque chose comme:

//your array 
var words = [ 
    { 
     word: 'Something', 
     link: 'http://www.something.com' 
    }, 
    { 
     word: 'Something Else', 
     link: 'http://www.something.com/else' 
    } 
]; 
//iterate the array 
$.each(words, 
    function() { 
     //find an element with class "message" that contains "word" (from array) 
     $('.message:contains("' + this.word + '")') 
      //substitute html with a nice anchor tag 
      .html('<a href="' + this.link + '">' + this.link + '</a>'); 
    } 
); 

Cette solution a un problème immédiat si (montré dans le exemple aussi). Si vous recherchez par exemple pour Quelque chose et vous trouvez Quelque chose de beau, le "contient" sera correspondre.
Si vous voulez une sélection stricte, vous devez faire:

//for each array element 
$.each(words, 
    function() { 
     //store it ("this" is gonna become the dom element in the next function) 
     var search = this; 
     $('.message').each(
      function() { 
       //if it's exactly the same 
       if ($(this).text() === search.word) { 
        //do your magic tricks 
        $(this).html('<a href="' + search.link + '">' + search.link + '</a>'); 
       } 
      } 
     ); 
    } 
); 

Il est votre choix si vous souhaitez itérer tous les éléments du tableau d'abord, puis tous les Doms, ou l'inverse. Cela dépend aussi du type de "mots" que vous allez chercher (voir les deux exemples pour le "pourquoi"). BIG AVERTISSEMENT: si le tableau contient du contenu défini par l'utilisateur, vous devez le désinfecter avant de l'injecter dans le code html des éléments!

Answer 4

Si vous souhaitez ajouter un code de commentaire sans commentaire à l'étiquette 'a' et commentez l'appel ci-dessus. Essayez ceci:

var words = [ 
{ 
    word: 'Something', 
    link: 'http://www.something.com' 
}, 
{ 
    word: 'Something Else', 
    link: 'http://www.something.com/else' 
}]; 

var changeWordsWithLink = function (words) { 
if(document.getElementById && document.getElementsByTagName) { 
    var messages = document.getElementById('message'); 

    if(messages) { 
     for(i = 0; i < messages.length; i++){ 
      for (j = 0; j < words.length; j++) { 
       if(words[j].word == messages[i].innerHTML) { 
        messages[i].innerHTML = words[j].link; 
        //messages[i].innerHTML = wrapInATag(words[j].link, words[j].word); 
       } 
      } 
     } 
    } 
} 
} 

var wrapInATag = function(link, word) { 
    return '<a href="' + link + '">' + word + '</a>'; 
}