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/

返回textarea中包含元素的内容

2 个答案: