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

时间:2014-01-23 15:51:20

标签: jquery html forms pug

假设我有一些像这样的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”)上点击,收集所有段落,以便输入在那里很好地滑动。

例如,我想知道如何编写一个将以上所有内容作为输入并输出的函数:

[
   "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"
]

2 个答案:

答案 0 :(得分:3)

我会这样做: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>') );
} );

即,首先用其值替换每个输入元素,然后提取每个段落的文本。

答案 1 :(得分:1)

使用以下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元素上使用,然后{ {1}}或element.val()取决于元素类型(分别为输入(element.text() - 1)或文本(ELEMENT_NODE - 3))。

获得字符串数组后,您将能够执行进一步的修改(例如使用正则表达式等)。

一些有用的链接:

我希望这会有所帮助。