utworzyć słowo kluczowe w łączu automatycznie, globalnie

Question

czy istnieje sposób, aby każde wystąpienie słowa automatycznie zmieniło się w link?

tak na przykład, za każdym razem piszę „jabłko”, jest on automatycznie sformatowany do <a href="www.apple.com" class="whatever" target="_blank">apple</a>

Jestem zakładając mogę używać javascript lub ewentualnie jQuery.

dziękuję!

Answer 1

bardzo prosty przykład ...

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

Oto prosty jQuery plugin, który powinien załatwić sprawę. Będzie on wybierał tylko węzły tekstowe, więc jeśli masz element z klasą apple lub identyfikator apple, nie zostanie on wymieniony. Dodatkowo, jeśli masz link <a href="#">apple</a> to nie zostanie zastąpiony (może być trochę więcej niż trzeba, ale pomyślałem, że go pisać w każdym razie):

(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); 

Zastosowanie:

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

Przykład roboczy: http://jsfiddle.net/andrewwhitaker/VmHjJ/

Należy zauważyć, że może to szybko stać się nieefektywne ze względu na użycie selektora $("*"). Jeśli to możliwe, powinieneś zamienić go na coś bardziej konkretnego (lub całkowicie usunąć część .find("*").andSelf() i przekazać wtyczce bardziej konkretny selektor).