Question

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

我发现此评论Find text string using jQuery?包含不区分大小写搜索的代码，但它会对整个文本节点进行网址化，而不仅仅是单词。

我可以使用类似下面的代码。但问题是它会对<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>

Answer 1

1。这是jQuery plugin which replaces text snippets

/**
* 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>');
}

Here is a demo

3。您需要进行一些更改

您所要做的就是更改jQuery选择器和附属组件阵列。其余的将由插件处理。 该插件非常智能，不会替换元素的属性。

Answer 2

像 -

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

技术取自 - Find text string using jQuery?

Answer 3

你试过这个：

将它们放在带有“URLify”类的span中，并根据您获得的数据，通过使用您的代码动态创建URL来替换span的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 /”你也可以这样做......

Answer 4

JQuery不会为您提供文本节点。您将不得不使用JQuery过滤器显式检查文本节点，只需遍历DOM（在这种情况下可能更快）。给出了一个例子here on SO。

如何使用不区分大小写搜索单词并使用jquery将其转换为超链接？

4 个答案:

1。这是jQuery plugin which replaces text snippets

2。以下是可用于实现替换的代码

3。您需要进行一些更改