jQuery - 加载文本区域，为每个 href 添加后缀并显示结果答案

【问题标题】：jQuery - loading textarea, adding suffix to every href and displaying the resultjQuery - 加载文本区域，为每个 href 添加后缀并显示结果
【发布时间】：2016-11-04 17:35:05
【问题描述】：

我正在尝试让一些 jQuery 工作。它需要从 textarea 中选择一些 html 代码，为其中的 every 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>

第一个链接没有查询字符串，第二个会有？

【问题讨论】：

你能举一个你输入的HTML代码的例子吗？

标签： jquery textarea href each

【解决方案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>

【讨论】：