обертывание текста с помощью jQuery

Question

Мне было интересно, как я могу искать любой текст в документе и обернуть его в структуру ссылок, используя jQuery.

Например - Поиск весь документ для текста «целевой частоты сердечных сокращений» и превратить его в

<a href="jvscrt:popup('heartrate.cfm')">target heart rate</a> 

Любые идеи?

спасибо! Chris

Answer 1

Вам нужно:

• Есть правило преобразования - то есть "текст для преобразования" - URL -> "convert.cfm". Вы можете добиться этого с помощью простого массива хэшей.

• Теперь вам нужно найти текст(), содержащийся внутри всех соответствующих элементов DOM. Если вы его найдете, вам нужно разделить содержимое на 3 части: до и после текста + самого текста.

• Теперь создайте якорь и соедините три части вместе и замените старый контент.

Вот как, например, текст высокоголистника выполняется в большинстве сценариев на стороне клитора.

Поскольку вы просили только идея, я оставлю удовольствие кодирования для себя;)

Answer 2

Используйте метод найти вместе с содержит. Вероятно, что-то вроде

$("p").find(":contains('target heart rate')") 
     .wrapInner($("<a href="jvscrt:popup('heartrate.cfm')"></a>")); 

или что-то в этом роде.

Я мог быть совершенно неправ. Проверка http://docs.jquery.com

Answer 3

jQuery wrap функция может быть?

Также рассмотрите text highlight plugin, которые содержат ключевые ключевые слова. вместо выделения вы могли бы создавать ссылки из них. Более конкретно следующие строки:

var spannode = document.createElement('span'); 
spannode.className = 'highlight'; 
// change the above to create an anchor and add href etc 

Answer 4

Это близко:

var findIt = 'Javascript'; 

$.expr[":"].containsNoCase = function(el, i, m) { 
    var search = m[3]; 
    if (!search) return false; 
    // we'll use text to find what we want... 
    return eval("/" + search + "/ig").test($(el).text()); 
}; 


$("p:containsNoCase('"+ findIt +"')").each(function() { 
    // and then html when we are ready to replace 
    var ht = $(this).html(); 
    var pos= ht.indexOf(findIt); 
    var start = ht.substring(0, pos); 
    var end = ht.substring(pos+findIt.length); 

    $(this).html(
     start 
     +'<a href="javascript:alert(\'heartrate.cfm\')">'+findIt+'</a>'+end); 

}); 

Но то, что вы ищете является жесткая вещь, чтобы обеспечить. Вы хотите искать только текст элементов, но вам нужно обновить содержимое HTML элемента, где он был найден (чтобы добавить ссылки). Когда вы вернетесь и используете html() для обновления элемента, вы в конечном итоге потенциально замените то, что не хотите.

Например, это хорошо:

<p>Hey, Javascript is fun.</p> 

Где, как это имеет проблемы:

<p><img src="something/Javascript.png">Whee, yaa Javascript</p> 

Текст в ГКЗ изображения заменяется errantly. Если есть способ найти позицию совпадающего текста внутри элемента, не окруженного тегом или внутри него, его можно будет заменить чисто.Конечно, вы можете использовать text(), но тогда вы не можете использовать какой-либо HTML в том, что вы добавляете обратно :(Возможно, я вернусь и посмотрю, есть ли у кого-нибудь еще что-нибудь предложить.

Answer 5

I ' м такой гомер:..

Text highlighting plugin for jQuery

Вы, вероятно, можете использовать это, чтобы получить работу просто переодеть обертку с якорем (ваша ссылка) элементом

Answer 6

Просто обнаружил интересный метод, который. решает эту проблему довольно чисто:

range.surroundContents

Я натолкнулся на это, читая о Selection object.