当前位置：文江博客话题详情

使关键字自动全局链接

发布于 2024-10-13 06:47:52 字数 207 浏览 5 评论 0原文

有没有办法让单词的每个实例自动变成链接？

例如，每次我写“apple”时，它都会自动格式化为 apple

我假设我可以使用 javascript 或可能使用 jquery。

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

停顿的约定 2024-10-20 06:47:52

非常非常简单的例子...

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>

演示

very very simple example...

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

回复收藏 0 原文

仅此而已 2024-10-20 06:47:52

这是一个简单的 jQuery 插件，应该可以解决这个问题。它只会选择文本节点，因此如果您有一个类 apple 或 id apple 的元素，它不会被替换。此外，如果您有一个链接 apple 它不会被替换（可能比您需要的多一点，但我想我'无论如何都要发布）：

(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.
amp;.com'>amp;</a>");

工作示例：http://jsfiddle.net/andrewwhitaker/VmHjJ/

请注意，由于使用 $("*") 选择器，这可能会很快变得低效。如果可能，您应该将其替换为更具体的内容（或完全删除 .find("*").andSelf() 部分，并向插件传递更具体的选择器）。

Here's a simple jQuery plugin that should do the trick. It will only select text nodes so that if you have an element with a class apple or id apple it won't get replaced. Additionally, if you have a link <a href="#">apple</a> it won't get replaced (might be a little more than you need, but I thought I'd post it anyway):

(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.
amp;.com'>amp;</a>");

Working example: http://jsfiddle.net/andrewwhitaker/VmHjJ/

Note that this could become inefficient rather quickly due to the use of the $("*") selector. If possible, you should replace it with something more specific (or remove the .find("*").andSelf() portion entirely and pass the plugin a more specific selector).

回复收藏 0 原文

~没有更多了~