从内容textarea返回内容中的元素

Question

我想制作一个脚本，将提取我在一个定义的元素内的一切。在这个例子中，它是<u>元素。

HTML

<textarea cols="75" rows="25" id="textShit"><u>sd</u></textarea><br> 
    <input type="submit" name="submit" id="submit"/> 
    <div id="res"></div> 

JS

$(function(){ 
    $('#submit').on('click',function(){ 
     $('textarea:contains("u")').each(function() { 
      //$('#res').html($(this).val()+'<br>'); 
      alert($(this).val()); 
     }) 
    }); 
}); 

，当我点击提交，在<div class="res">返回什么每<u>里面我想。

如何实现这一目标？

http://jsfiddle.net/warface/Ewve8/

Answer 1

$(function() { 
    $('#submit').on('click', function() { 
     var val = $.trim($('textarea').val()); 
     var text = $('<div/>').html(val).find('u').text(); 
     // console.log(text); 
    }) 
}); 

http://jsfiddle.net/Ewve8/1/

更新：您可以使用map方法，并加入了返回的数组的元素：

$('#submit').on('click', function() { 
    var val = $.trim($('textarea').val()), 
     text = $('<div/>').html(val).find('u').map(function(){ 
      return $(this).text(); 
     }).get(); 

    $('.res').html(text.join('<br>')); 
}) 

Answer 2

你接近。首先，你没有在你的小提琴中包含jQuery库。

只需将您的textare内容加载到jQuery对象中，它就会被解析。然后你可以使用.filter('u')得到你想要的内容：

var html = $($(this).val()); 
$('#res').html(html.filter('u').html()); 

演示：http://jsfiddle.net/QhsDY/

的一个“疑难杂症”是.filter()只会返回顶级元素，因此，如果<u>嵌套它赢得没有工作。解决方法是使用.find()，但诀窍是.find()不会查看顶级元素。这样，包的内容在一个div然后使用.find()：

var html = $('<div/>').html($(this).val()); 
$('#res').html(html.find('u').html()); 

演示：http://jsfiddle.net/QhsDY/1/

至于多个<u>元件，使用.each()：

var html = $('<div/>').html($(this).val()); 

html.find('u').each(function() { 
    $('#res').append($(this).html()+'<br>'); 
}); 

演示：http://jsfiddle.net/QhsDY/2/