0

我想将某些关键词转换为我网站上的附属链接。我不想在每个页面中手动编码这些链接中的每一个。因此，我正在寻找基于 Javascript/Jquery 的解决方案，其中使用给定的关键字列表和相应的 URL（二维数组），在页面加载时，这些关键字使用其相应的 URL 进行“URL 化”。

我发现这条评论Find text string using jQuery? 它具有不区分大小写搜索的代码，但它对整个文本节点进行 URL 化，而不仅仅是单词。

我可以使用类似下面的代码。但问题是它也会对<pre>元素内的关键字进行 URL 化。我希望它们仅在<p>元素中进行 URL 化。

<script type="text/javascript">
(function($) {
  var thePage = $("body");
  thePage.html(thePage.html().replace(/testing/ig, '<a href="http://testing.com">testing</a>')); 
})(jQuery)
</script>

例如：

<p>I'm going to test urlification</p>
<pre>
function test() {
alert(' test ');
}
</pre>

应该改为

<p>I'm going to <a href="test123.com">test</a> urlification</p>
<pre>
function test() {
alert(' test ');
}
</pre>
4

4 回答 4

3

1.这是替换文本片段的jQuery插件

/**
* jQuery plugin to replace text strings
*
* Taken from @link http://net.tutsplus.com/tutorials/javascript-ajax/spotlight-jquery-replacetext/
*/

$.fn.replaceText = function( search, replace, text_only ) {
return this.each(function(){
        var node = this.firstChild,
        val, new_val, remove = [];
        if ( node ) {
            do {
              if ( node.nodeType === 3 ) {
                val = node.nodeValue;
                new_val = val.replace( search, replace );
                if ( new_val !== val ) {
                  if ( !text_only && /</.test( new_val ) ) {
                    $(node).before( new_val );
                    remove.push( node );
                  } else {
                    node.nodeValue = new_val;
                  }
                }
              }
            } while ( node = node.nextSibling );
        }
        remove.length && $(remove).remove();
    });
};

2.这是您可以用来实现替换的代码

// the array of affiliate links
var affiliates = [
        ['google', 'http://www.google.com/'],
        ['bing', 'http://www.bing.com/'],
        ['yahoo', 'http://www.yahoo.com/']
    ],
    $p = $('p'), // the selector to search text within
    i = 0, // index declared here to avoid overhead on the loop
    size = affiliates.length, // size of the affiliates array 
                              // again declared here to avoid overhead
    reg; // the regex holder variable

// loop over all the affiliates array
for(i; i < size; i++){
    // create a regex for each affiliate
    reg = new RegExp('('+affiliates[i][0]+')','gi');

    // finally replace the string with the link
    // NOTE: do not forget to include the aforementioned plugin before this code,
    // otherwise this won't work
    $p.replaceText(reg, '<a href="'+affiliates[i][2]+'">$1</a>');
}

这是一个演示

3. 你需要做一些改变

您所要做的就是更改 jQuery 选择器和附属数组。其余的将由插件处理。该插件足够聪明，不会替换元素的属性。

于 2011-08-06T09:19:15.197 回答
1

就像是 -

var foundin = $('p:contains("I am a simple string")');
foundin.each(function () {
    var linktext = $(this).html().replace('I am a simple string','<a href="">I am a simple string</a>');
    $(this).html(linktext);
});

或使用您的示例-

var foundin = $('p:contains("testing")');
foundin.each(function () {
    var linktext = $(this).html().replace(/testing/ig, '<a href="http://testing.com">testing</a>'));
    $(this).html(linktext);
});

技术取自 -使用 jQuery 查找文本字符串？

于 2011-08-06T09:05:15.677 回答
0

你有没有试过这个：

将它们与类“URLify”放在跨度中，并根据您获得的数据只需通过使用您的代码动态创建 URL 来替换跨度的 innerText

Here is some text with this <span class="URLify">DataItem</span> to be search and replaced with URL or just to be URLified

在你的 jQuery 中你可以做这样的事情（未测试）

var URL = "http://www.myapp.com/ListOfItems/"; //the url to use or append item to

$('.URLify').wrapInner('<a href="'+URL+'"></a>');

或者，如果您想将“DataItem”附加到“.../ListOfItems/”，您也可以这样做...

于 2011-08-06T08:58:53.550 回答
0

JQuery 不会给你文本节点。您将不得不使用 JQuery 过滤器显式检查文本节点，或者仅通过遍历 DOM（在这种情况下可能更快）。这里给出了一个关于 SO的例子。

于 2011-08-06T09:06:07.900 回答