Как выполнить поиск слова без учета регистра и преобразовать его в гиперссылку с помощью jquery?

Question

Я хочу конвертировать определенные ключевые слова в партнерские ссылки на моем сайте. Я не хочу вручную кодировать каждую из этих ссылок на каждой странице. Поэтому я ищу решение на основе Javascript / Jquery, в котором при заданном списке ключевых слов и соответствующих URL-адресов (двумерный массив) при загрузке страницы эти ключевые слова «URLified» используют соответствующие URL-адреса.

Я нашел этот комментарий Найти текстовую строку, используя jQuery? , в которой есть код для поиска без учета регистра, но он URL-адрес всего текстового узла, а не просто слова.

Я мог бы использовать что-то вроде кода ниже. Но проблема в том, что он будет URLify ключевые слова внутри элементов <pre>. Я хочу, чтобы они были URLified внутри <p> элементов.

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

Например:

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

должно измениться на

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

Answer 1

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 и массив филиалов.Об остальном позаботится плагин. Плагин достаточно умен, чтобы не заменять атрибуты элемента .

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

Техника взята из - Найти текстовую строку с помощью jQuery?

Answer 3

JQuery не выдаст вам текстовые узлы.Вам придется явно проверять наличие текстовых узлов, используя фильтр JQuery, просто обходя DOM (что, вероятно, быстрее в этом случае).Пример приведен здесь на SO .

Answer 4

Вы пробовали это:

Поместите их в span с классом "URLify" и в зависимости от того, какие данные вы получите, просто замените innerText диапазона, создав URL на лету с вашим кодом

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 /», вы можете сделать это тоже ...