перенос текста с использованием jQuery

Question

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

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

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

Есть идеи?

спасибо! Chris

Answer 1

Это близко:

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>

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

Answer 2

Я такой гомер:

Плагин для выделения текста для jQuery .

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

Answer 3

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

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

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

Answer 4

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

range.surroundContents

Я сталкивался с этим, когда читал об объекте Selection .

Answer 5

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

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

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

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

Answer 6

Вам понадобится:

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

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

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

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

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