如何抓取隨機混合輸入和段落的內容

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") 

我將如何，在$（「＃發送」）。點擊，收集所有，這樣的投入在裏面很好地滑落的段落。

例如，我想知道如何編寫一個函數，以上所有作爲輸入，輸出：

[ 
    "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（我認爲這是你的玉腳本輸出）提供：

<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()

我希望這會有所幫助。