jquery - 将 HTML 字符串转换为 jQuery 对象然后通过它进行解析的问题

Question

我已经设置了一个小片段，它将从 textarea 中获取用于电子邮件营销的自动回复代码。当 textarea 失去焦点时，它会解析刚刚粘贴的内容并从中获取一些属性和元素，并将它们放在单独的输入字段中。

问题是我写的代码显然没有做到这一点，对于某些自动回复代码，它不会获取表单的操作 URL，但有些可以，它通常可以毫无问题地获取所有隐藏的输入字段，然后有时不想抓取名称或电子邮件字段的“名称”属性。

代码非常简单。我尝试使用 .find()而不是 .filter()它似乎只是随机行动。有些东西对 .find() 不起作用, 有些东西不能用 .find() .我认为这不是问题的根源，但可能有助于解释正在发生的事情。

编辑 .find() 似乎“更好” .

我只是不知道为什么它会这样，有什么想法吗？

插入文本区域的 HTML 表单示例 is here . (它很乱，但我没有写它!) -- 这段代码将在 textarea 中当它失去焦点时，下面的代码会解析它。

编辑:问题的根源似乎是<form action="#">部分。

• 安Aweber Code例如，不会检索表单 URL(action 属性)

• 安Ebizac Code不会检索表单 URL

• 安Imnica Code现在显然工作正常(？)。

• GetResponse Code 没有问题.

Most recent JSFiddle <- 代码在这里

Answer 1

我认为 html 的问题不像您的 AWeber 示例那样工作是因为它不包含在单个顶级父元素中，这意味着当您解析它以创建 arcode 时该对象包含 <form> 的 jQuery 对象元素作为顶级元素。这反过来意味着 .find()方法 - 寻找后代元素 - 没有找到任何东西，因为没有额外的 <form>子元素。 (您可以通过检查 arcode.length 或使用 arcode.each() 来记录 arcode 中元素的标记名来自行测试。)

你的例子确实有效，恰好被包装在顶级 <div> 中, 所以它没有这个问题。

所以我建议的修复方法是将输入的 html 包装在 <div> 中元素自己，从而使一切与.find()一起工作.然后简化您的函数，因为以下简短版本完成了您的原始函数所做的所有工作:

$j( '#jwsqz_autocode' ).blur( function() {

    var thehtml = "<div>" + $j( this ).val() + "</div>";
    var arcode = $j( thehtml );

    $j('#jwsqz_autoformurl').val( arcode.find('form').attr('action') );
    $j('#jwsqz_arnameinput').val(
         arcode.find('input[type="text"][name*="name"]').attr('name') );
    $j('#jwsqz_aremailinput').val(
         arcode.find('input[type="text"][name*="email"]').attr('name') );

    var hiddens = "";

    arcode.find( 'input[type="hidden"]' ).each( function() {
       hiddens += $j( this ).prop( 'outerHTML' ) + "\n";
    });

    $j( '#jwsqz_autohidden' ).val( hiddens );

});

工作演示:http://jsfiddle.net/fpK9F/6/ (似乎可以处理您的示例案例)。

您会注意到我使用了 jQuery attribute contains selector与 [name*="email"] .

请注意，如果您的代码中的以下测试是多余的:

if( hiddens != '' )
   $j( '#jwsqz_autohidden' ).val( hiddens );
else
   $j( '#jwsqz_autohidden' ).val( '' );

在else如果您正在设置 hiddens 中的值变量，因此您可以仅用 if 中的部分替换整个结构- 正如我在上面的代码中所做的那样。

更新:对于 name 的不区分大小写的测试属性的值你可以这样做:

    $j('#jwsqz_aremailinput').val(
         arcode.find('input[type="text"]')
               .filter(function(){ return /email/i.test(this.name); })
               .attr('name') );

(不一定要用正则表达式，关键是.filter()函数。)

不区分大小写的演示:http://jsfiddle.net/fpK9F/7/