Question

我正在尝试使用jQuery。它需要从textarea中选择一些html代码，在其中的每个 href中添加一个后缀，然后在另一个textarea中显示生成的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);
});

它应该很简单，我认为我非常接近，但我已经完全了解了为什么它不起作用。有人想找到我出错的地方吗？

更新2016年4月11日

感谢您的回答，但它打破了嵌套代码，例如：试试这个......

<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对象，然后才能检查锚标记并使用其href进行播放。

完成后，您可以修改它们，然后将它们转回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 );
	
    // create a new var to store our new output
  	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();
    });      
	
    // 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>

jQuery - 加载textarea，为每个href添加后缀并显示结果

1 个答案: