сделать ключевое слово в ссылку автоматически, глобально - PullRequest
Новая
       11

сделать ключевое слово в ссылку автоматически, глобально

8 голосов
/ 21 января 2011

есть ли способ, чтобы каждый экземпляр слова автоматически превращался в ссылку?

так, например, каждый раз, когда я пишу «яблоко», оно автоматически форматируется в <a href="www.apple.com" class="whatever" target="_blank">apple</a>

Я предполагаю, что мог бы использовать javascript или, возможно, jquery.

спасибо!

Ответы [ 2 ]

6 голосов
/ 21 января 2011

очень очень простой пример ...

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>

демо

5 голосов
/ 21 января 2011

Вот простой плагин jQuery, который должен добиться цели.Он будет выбирать только текстовые узлы, так что если у вас есть элемент с классом apple или id apple, он не будет заменен.Кроме того, если у вас есть ссылка <a href="#">apple</a>, она не будет заменена (может быть, немного больше, чем нужно, но я все равно ее опубликую): 

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

Использование: 

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

Рабочий пример: http://jsfiddle.net/andrewwhitaker/VmHjJ/

Обратите внимание, что это может стать довольно неэффективным из-за использования селектора $("*").Если возможно, вы должны заменить его чем-то более конкретным (или полностью удалить часть .find("*").andSelf() и передать плагину более конкретный селектор).

...