jQuery - загрузка textarea, добавление суффикса для каждого href и отображение результата

Question

Я пытаюсь получить немного работы jQuery. Он должен выбрать некоторый код html из текстового поля, добавить суффикс в каждый href внутри него, а затем отобразить полученный html-код в другом текстовом поле. Я не хочу, чтобы он когда-либо отображал HTML, просто отобразите код.

Вот где я должен ...

$('#apply').click(function() { 
    var a = $('#a').val(); 
    var b = $('#b').val(); 
    var c = $('#c').val(); 

    var query_string = '?a=' + a + '&b=' + b + '&c=' + c; 

    var input_html = $("#input_html").val(); 

     $(input_html + ' a').each(function() { 
      var href = $(this).attr('href'); 

      if (href) { 
       href += (href.match(/\?/) ? '&' : '?') + query_string; 
       $(this).attr('href', href); 
      } 
     }); 

    $("#output_html").val(input_html); 
}); 

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

UPDATE 04/11/2016

Спасибо за ответ, но он порывает с вложенным кодом, например, попробуйте это ...

<table><tr><td><a href="foo-bar"><img src="image.jpg"></a></td></tr></table> 
<a href="foo-bar"><img src="image.jpg"></a> 

Первая ссылка не будет содержать строку запроса, вторая будет?

Answer 1

Ваш input_html var - текстовая строка - вам нужно разобрать ее на объекты DOM, прежде чем вы сможете проверить привязку тегов и играть с их hrefs.

После того, как вы это сделали, вы можете изменить их, а затем вернуть их обратно в HTML для вывода.

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

$('#apply').click(function() { 
 
    var a = $('#a').val(); 
 
    var b = $('#b').val(); 
 
    var c = $('#c').val(); 
 

 
    // don't need the ? here, we add it later 
 
    var query_string = 'a=' + a + '&b=' + b + '&c=' + c; 
 

 
    var input_html = $("#input_html").val(); 
 
    
 
    // parse string into HTML DOM objects 
 
    var html_dom = $.parseHTML(input_html); 
 
\t 
 
    // create a new var to store our new output 
 
    \t var output_html = ''; 
 
    
 
    // loop over DOM objects, check for anchor tags 
 
    $.each(html_dom, function(i, el) { 
 

 
     if(el.nodeName === 'A') { 
 
     
 
      // if we have an anchor, get it's href 
 
      var href = el.href; 
 

 
      // if it's not blank, append query 
 
      if (href != '') { 
 
      el.href += (href.match(/\?/) ? '&' : '?') + query_string; 
 
      } 
 
     } 
 
     
 
     // append the element as html to the output string 
 
     // here we make a div $(<div/>) 
 
     // inject the element ,append($(el)) 
 
     // then ask jQuery to give the contents as HTML .html() 
 
     output_html += $('<div/>').append($(el)).html(); 
 
    });  
 
\t 
 
    // put the html in the output cell 
 
    $("#output_html").val(output_html); 
 
});

textarea { 
 
    width: 100%; 
 
    height: 8em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
A<input id="a" value="a" /><br/ > 
 
B<input id="b" value="b" /><br/ > 
 
C<input id="c" value="c" /><br/ > 
 
<textarea id="input_html"> 
 
    <a href="http://example.com">Link</a> 
 
    <a href="http://example.com?foo=bar">Link</a> 
 
    <p>Other elements get ignored</p> 
 
    As does plain text 
 
    <a href="">Blank Href</a> 
 
    <a class="foo">No Href</a> 
 
</textarea> 
 
<textarea id="output_html"></textarea> 
 
<button id="apply">Apply</button>