Заменить часть URL-адреса изображения в ASP.NET с помощью JQuery

Question

У меня есть скрипт, который переводит URL-адрес изображения в путь и отлично работает для исчезновения изображения при навигации по первичному узлу. Сценарий ниже дает мне:

http://localhost/Bar/App_Themes/main/images/Beers-Faded.gif

Как только я перемещаюсь на один узел глубже, он добавляет путь к приложению в URL, и функция завершается ошибкой:

http://localhost/bar/Bar/App_Themes/main/images/Beers-Faded.gif

JQuery:

$(function ()  {
   $('img.fade').each(function ()  {
    var $$ = $(this);
    var target = $$.css('background-image').replace(/^url|["]|[\)\(]/g, '');
    $$.wrap('<span style="position:relative;"></span>')
     .parent() // span elements
     .prepend('<img>')
     .find('img:first') // selector now new image
     .attr('src', target);
    console.log(target);     
    $$.css({
     'position': 'absolute',
     'left': 0,
     'top': this.offsetTop
    });
    $$.hover(function () {
     $$.stop().animate({
      opacity: 0
     }, 250);
    }, function ()  {
     $$.stop().animate({
      opacity: 1
     }, 250);
    });
  });
});

Изображение:

<img class="fade" runat="server" src="~/App_Themes/main/images/Beers-Color.jpg" style="background-image: url('../Bar/App_Themes/main/images/Beers-Faded.gif');" />`

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

Большое спасибо,

Джеймс.

Answer 1

Хорошо, поэтому я нашел решение с помощью 'OReilly - Поваренная книга регулярных выражений' стр. 41. 'Совпадение целых слов'

Следующий код не ищет второе вхождение, а только первое, не заглядывая дальше в путь ... (я думаю). Я только добавил \/\bbar\b.

var target = $$.css('background-image').replace(/^url|["]|\b(\w+)\s+\1\b|\/\bbar\b|[\)\(]/g, '');

Надеюсь, это поможет любому, кто столкнется с той же проблемой.