0

Не очень хорошо получается у меня с js-ом.

Есть блок с текстом.

<div id="4-22" class="element">sample text [ip]100.100.100.100[/ip]</div>

Нужно заменить текст с аи пи адресом на ссылку, чтоб вместо

sample text [ip]100.100.100.100[/ip]

было

(body onload) sample text <a href="100.100.100.100">100.100.100.100</a>

Скажите, куда копать? Спасибо.

UPD Ребята, подскажите. Это див у <div id="4-22" class="element"> меня "кликабельная", т.е при нажатий вызываеться onClick.

Так вот, если нажимаю ссылку, который сделал с помощью скрипта @gridsane ,

то оно не переходить по ip адресу, а срабатывает onClick Див блока. Не скажете как обходить ?

3 ответа 3

4

Почти успел =) Второй вариант с регулярными выражениями (из-за них он может быть медленнее ответа выше.

$(function() {
    var target = $("#4-22");
    var html = target.html();
    // заменяем все вхождения на нужную нам строку
    // флаг "g" означает, что заменить нужно все вхождения
    html = html.replace(/\[ip\](.*?)\[\/ip\]/g,"<a href=\"$1\">$1</a>");
    // применяем
    target.html(html);
});

Живой пример jsfiddle

UPD2. Сделал как в вопросе

3
  • Да, регекспы это хорошо - красивее, если оставлять вариант с парсом строки
    – Чад
    14 июн 2012 в 8:49
  • Красивее, но как правило, медленнее
    – gridsane
    14 июн 2012 в 8:51
  • 1
    @gridsane, @Чад, @Asen, спс ))
    – Vfvtnjd
    14 июн 2012 в 9:42
2

Получаете значение блока например так (jquery):

  block_html = $('#4-22').html();

Потом в этом block_html ищете [ip] и [/ip] чем нить типа

 startIndex = block_html.IndexOf('[ip]');
 endIndex = block_html.IndexOf('[/ip]');

Собираете новую строку из block_html подстроками до startIndex + ваш текст на основе строки из (startIndex,endIndex) + текст после endIndex и полученную строчку фигачете в блок так:

$('#4-22').html(parsed_string);

Я бы сделал более простое решение, но для этого надо [ip] сделать по другому например:

<div id='4-22'>some text <span class="toHref" ip="100.100.100.100"/> some thing other</div>

а js по замене такой был бы тогда (не надо париться с парсом строки):

$('span.toHref').each(function()
{
  $(this).html("<a href='"+$(this).attr("ip")+"'>"+$(this).attr("ip")+"</a>");
});

Можно красивше, но лень.

0

А почему бы не схитрить? Ведь есть более легкие путь:

<div id="4-22" class="element">sample text <ip>100.100.100.100</ip></div>

<script>
var a=$("#4-22 ip").text();  //100.100.100.100
var a=$("#4-22 ip").text("");
var a=$("#4-22 ip").append("<a href='100.100.100.100'>100.100.100.100</a>");
</script>

Здесь мы заменили [IP] [/IP] на соответствующие HTML-сущности. Таких тегов в HTML не существует, но jQuery на это плевать =)

Далее чистый jQuery...

2
  • @Asen, а чем это принципиально отличается от моего второго варианта?
    – Чад
    14 июн 2012 в 9:00
  • 1
    @Чад, извините, не смотрел ответы...
    – AseN
    14 июн 2012 в 9:04

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.