jQuery:如何选择不被html标记包围的文本? [英] jquery: how can you select texts not surrounded by html tags?

问题描述

Beer
<br>
Vodka
<br>
rum
<br>
whiskey

如何选择啤酒?还是朗姆酒?在jQuery中?它们没有被任何html标记包围....

解决方案

如果您要直接选择文本节点，建议不要使用jQuery.要澄清的是，获取一组包装的文本节点不是问题，但是将命令链接到包装的文本节点集会产生不可预测的结果，或者不能与许多命令一起使用，因为它们希望包装的文本集包含元素节点.

您可以通过过滤父级的子级以仅返回文本节点(即nodeType === 3)来执行此操作，但是如果您的问题是要对文本执行某些操作，则获取父级元素并处理文本内容.例如，

$('#parentElement').html(); // html of parent element

$('#parentElement').text(); // text content of parent element and any descendents

$('#parentElement').contents(); // get all child nodes of parent element

如果要获取文本节点，以下是一种方法

$('#parentElement').contents().filter(function() { return this.nodeType === 3 });

或者您可能想看看 Karl Swedberg的Text Children插件，它也提供了各种不同的选项

作为对您的评论的回应，使用包装集中的文本节点的一种方法是将jQuery对象转换为数组，然后使用该数组.例如，

// get an array of the immediate childe text nodes
var textArray = $('#parentElement')
                    .contents()
                    .filter(function() { return this.nodeType === 3 })
                    .get();

// alerts the text content of each text node
$.each(textArray, function() {
    alert(this.textContent);
});

// returns an array of the text content of the text nodes
// N.B. Remember the differences in how  different 
// browsers treat whitespace in the DOM
textArray = $.map(textArray, function(e) {
    var text = $.trim(e.textContent.replace(/\n/g, ""));
    return (text)? text : null;
});

Beer
<br>
Vodka
<br>
rum
<br>
whiskey

how can you select beer ? or rum ? in jquery ? they are not surrounded by any html tags....

解决方案

If you mean that you want to select the text node directly, this is advised against using jQuery. To clarify, getting a wrapped set of text nodes is not a problem, but chaining commands onto a wrapped set of text nodes has unpredictable results or does not work with many of the commands since they expect the wrapped set to contain element nodes.

You can do it by filtering the children of a parent to return only text nodes, i.e. nodeType === 3 but if your question is about performing some manipulation on the text, then get the parent element and manipulate the text contents. For example,

$('#parentElement').html(); // html of parent element

$('#parentElement').text(); // text content of parent element and any descendents

$('#parentElement').contents(); // get all child nodes of parent element

If you wanted to get the text nodes, the following is one way

$('#parentElement').contents().filter(function() { return this.nodeType === 3 });

Or you may want to look at Karl Swedberg's Text Children plugin, which provides various different options too.

EDIT:

In response to your comment, one way to work with the text nodes in a wrapped set is to convert the jQuery object to an array, then work with the array. For example,

// get an array of the immediate childe text nodes
var textArray = $('#parentElement')
                    .contents()
                    .filter(function() { return this.nodeType === 3 })
                    .get();

// alerts the text content of each text node
$.each(textArray, function() {
    alert(this.textContent);
});

// returns an array of the text content of the text nodes
// N.B. Remember the differences in how  different 
// browsers treat whitespace in the DOM
textArray = $.map(textArray, function(e) {
    var text = $.trim(e.textContent.replace(/\n/g, ""));
    return (text)? text : null;
});

这篇关于jQuery:如何选择不被html标记包围的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！