jQuery - Замена частичного текста внутри ссылки

Question

Я пытаюсь заменить первые 5 букв во всех ссылках на этой странице, которые содержат #OFN# в первых 5 буквах ссылки с изображением для замены #OFN# текста, но хотят сохранить остальная часть текста ссылки.

Вот что я использую до сих пор ...

$(document).ready(function() { 
    $("a:contains('#OFN#')").each(function() { 
     var calSubject = $(this).text().substring(5); 
     $(this).replaceWith("<img src='/images/ofn_bullet.gif' width='10' height='10' style='width: 10px; height: 10px; border: none;' />" + calSubject); 
    }); 
}); 

Но этот подход устраняет <a> tag полностью из текста. Как я могу это сделать, не снимая <a> tags

Вот пример HTML звена:

<a href="#" onclick="eventDisplay('980','4/18/2013')">#OFN# 2013 Midwest Regional Meeting</a> 

Я попытался с помощью .children() но это, кажется, не работает. Что я здесь делаю неправильно?

Answer 1

Выберите текстовые узлы и обновить их вместо этого. jsFiddle Demo

$(document).ready(function() { 
    $("a:contains('#OFN#')").contents().each(function(){ 
     // skip if not a text node 
     if (this.nodeType != 3) { 
      return true; 
     } 
     this.nodeValue = this.nodeValue.substr(5); 
     $(this).before("<img src='/images/ofn_bullet.gif' width='10' height='10' style='width: 10px; height: 10px; border: none;' />"); 
    }); 
}); 

Answer 2

использование html вместо replaceWith. Проверьте эту скрипку:

http://jsfiddle.net/lbstr/MPTp7/

replaceWith заменит элемент, который он вызывается на, что объясняет поведение, которое вы описали. Используя $.fn.html, вы заменяете все внутри анкера.

Answer 3

Используйте метод html поместить код внутри ссылки вместо того, чтобы заменить его:

$(this).html("<img src='/images/ofn_bullet.gif' width='10' height='10' style='width: 10px; height: 10px; border: none;' />" + calSubject); 

Answer 4

Я хотел бы сделать что-то немного более многословный:

var regex = /^#0FN#/; 
$("a").each(function() { 
    var $this = $(this), html = $this.html(); 
    if (regex.test(html)) { 
     html.replace(/#0FN#/, "image stuff"); 
     $this.html(html); 
    } 
}); 

Answer 5

Это выглядит понятнее мне:

<a href="#" class="ofn" onclick="eventDisplay('980','4/18/2013')"> 
    <span>2013 Midwest Regional Meeting</span> 
</a> 

И

$(document).ready(function() { 
    $('a.ofn').prepend('<img class="icon" src="/images/ofn_bullet.gif" />'); 
}); 

И

a.ofn .icon { 
    width: 10px; 
    height: 10px; 
    border: none; /* Actually i think you mean outline rather than border */ 
} 

Если вы не должны делать это так, как вы это делаете по каким-то причинам вы не Ell нам о.

Вы также можете переместить onlick из тега в javascript, если параметры eventDisplay всегда совпадают.