如何抓取随机混合的输入和段落的内容

Question

假设我有一些这样的 HTML：

当心！在Jade

   p Dear Lorem ipsum,                                                  
   p Lorem Ipsum is simply dummy text of the printing and typesetting 
      input(type="text", placeholder="phone/mail")                          
      | on [HERE]                                                           
      input(type="text", placeholder="date")                                
      | and identified the debt as [HERE]                                   
      input(type="text", placeholder="lorem")      
      | . bled it to make a type specimen book. It has survived not only five centuries, but also the leap into.                                                                       
   p  dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknow
      input(type="text", placeholder="mediums of communication", value="Messaging Service")
      | den-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites 
   p Thank you for your cooperation.                                       

   p Sincerely,
   button#send(value="submit")

我将如何在 $("#send").click 上收集所有段落，以便将输入很好地滑入其中。

例如，我想知道如何编写一个将上述所有内容作为输入和输出的函数：

[
   "Dear Lorem ipsum,",
   "Lorem Ipsum is simply dummy text of the printing and typesetting 555-1234 on [HERE] some date and identified the debt as [HERE] this is inputted text. bled it to make a type specimen book. It has survived not only five centuries, but also the leap into.",
   "dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknow this is an inputted medium of communication den-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites",
   "Thank you for your cooperation.",
   "Sincerely"
]

Answer 1

我会这样做：http://jsfiddle.net/b64aq/1/

如果您使用以下 HTML（我认为这是您的 Jade 脚本的输出）：

<div class="container">
    <p>Dear Lorem ipsum,</p>                                               
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting <input type="text" name="contact" placeholder="phone/mail" /> on [HERE] <input type="text" name="date" placeholder="date" /> and identified the debt as [HERE] <input type="text" name="lorem" placeholder="lorem" /> . bled it to make a type specimen book. It has survived not only five centuries, but also the leap into.</p>                                                     
    <p>dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknow <input  type="text" name="mediums" placeholder="mediums of communication"  value="Messaging Service"> den-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites </p>
    <p>Thank you for your cooperation.</p>     
    <p>Sincerely</p>
    <button id="send" type="send" value="submit">
</div>
<div class="result"></div>

应该这样做：

$('#send').click( function() {
    var array = [];
    var $paragraphs = $('.container').clone().find('p');
    $paragraphs.each( function( ) {
        $(this).children().each(function( ) {
            $(this).replaceWith( $(this).val() );
        } );
        array.push( $(this).text() );
    } );

    $('.result').append( array.join('<br>') );
} );

也就是说，首先将每个输入元素替换为其值，然后提取每个段落的文本。

Answer 2

如何使用以下 jQuery 代码：

$("#send").click(function(){
    var array = 
        $.map($('p'), 
        function(p){ 
            var contents = $.map($(p).contents(), 
                function(e){ 
                    if(e.nodeType === 1) return $(e).val(); 
                    if(e.nodeType === 3) return $(e).text();
                    // otherwise undefined value will be returned
                }); 

            // .join(' ') can be used to have to have some gaps between input and text
            return contents.join('');
        });
})

$.map 会将所有p 元素转换（映射）为其文本值。

@roobeedeedada 注意到，jQuery text() 不返回输入元素的内容，因此 contents() 已用于每个 p 元素，然后是 element.val() 或 element.text()取决于元素类型（分别是输入 (ELEMENT_NODE - 1) 或文本 (TEXT_NODE - 3)）。

一旦你得到一个字符串数组，你就可以进行进一步的修改（例如使用正则表达式等）

一些有用的链接：

• jQuery map
• jQuery text()
• jQuery contents()

我希望这会有所帮助。