fanno parola chiave in collegamento automaticamente, a livello globale

Question

c'è un modo per fare un ogni istanza di una parola trasformare automaticamente in un link?

così per esempio, ogni volta che scrivo "mela", è formattato automaticamente <a href="www.apple.com" class="whatever" target="_blank">apple</a>

Sto assumendo potrei usare JavaScript o forse jquery.

grazie!

Answer 1

molto molto semplice esempio ...

jQuery

var span = $('span'); 
    span.html(function(i,html){ 
     replaceTextWithHTMLLinks(html); 
    }); // jQuery version 1.4.x 


function replaceTextWithHTMLLinks(text) { 
    var exp = /(apple)/ig; 
    return text.replace(exp,"<a class='link' href='http://www.$1.com' target='_blank' >$1</a>"); 
} 

html

<span> 
An apple a day, makes 7 apples a week! 
</span> 

demo

Answer 2

Ecco un semplice plugin per jQuery che dovrebbe fare il trucco. Selezionerà solo i nodi di testo in modo che se si ha un elemento con una classe apple o id apple non verrà sostituito. Inoltre, se si dispone di un collegamento <a href="#">apple</a> non otterrà sostituito (potrebbe essere un po 'più del necessario, ma ho pensato di postare comunque):

(function($) { 
    $.fn.replacetext = function(target, replacement) { 
     // Get all text nodes: 
     var $textNodes = this 
       .find("*") 
       .andSelf() 
       .contents() 
       .filter(function() { 
        return this.nodeType === 3 && 
         !$(this).parent("a").length; 
       }); 

     // Iterate through the text nodes, replacing the content 
     // with the link: 
     $textNodes.each(function(index, element) { 
      var contents = $(element).text(); 
      contents = contents.replace(target, replacement); 
      $(element).replaceWith(contents); 
     }); 
    }; 
})(jQuery); 

Usage:

$("body").replacetext(/apple/gi, "<a href='http://www.$&.com'>$&</a>"); 

Esempio di lavoro: http://jsfiddle.net/andrewwhitaker/VmHjJ/

Si noti che questo potrebbe diventare inefficiente piuttosto rapidamente a causa dell'uso del selettore $("*"). Se possibile, dovresti sostituirlo con qualcosa di più specifico (o rimuovere completamente la porzione .find("*").andSelf() e passare al plugin un selettore più specifico).