Question

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

你怎么选择啤酒？还是朗姆酒？在jquery？它们没有被任何html标签包围....

Answer 1

如果您想直接选择文本节点，建议不要使用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's Text Children plugin，它也提供了各种不同的选项。

修改

在回复你的评论时，处理包装集中文本节点的一种方法是将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; });

Answer 2

就个人而言，我将它们包裹在<span>中，然后您可以更轻松地引用它们。我正在使用Russ Cam的过滤器，所以道具（和+1）给他

$(document).ready(function(){
 $('body').contents().filter(function(){ return this.nodeType === 3 }).each(function(){
  $(this).wrap('<span class="text"></span>');
 })
})

然后您可以使用$('.text')和选择器更轻松地访问它们。

Answer 3

使用.contains方法。见Find text string using jQuery?

Answer 4

好吧它必须被某种包围，即使它只是<body>标签。如果您的HTML文档中只写了一个，我认为浏览器会隐式地在您的DOM中放置<body>。

话虽如此，请看一下：

How do I select text nodes with jQuery?

Answer 5

改变一点DOM怎么样？首先选择包含所需字符串的节点，而不是运行一个函数，该函数用“string”替换每个“string”的出现

我们不需要外部插件

<div>
    Vodka <br />
    Rum <br />
    Whiskey<br />
</div>

<script type="text/javascript">
$(function(){
    $.fn.replaceText = function(txt){
        var reg = new RegExp(txt, 'g');
        var strWith = '<span class="selected">' + txt + '</span>';
        var rep = this.html().replace(reg, strWith);
        this.html(rep);
        return $("span", this);
    };
    $("div:contains('Vodka')").replaceText('Vodka').css('textDecoration', 'underline');
});
</script>

我已经快速创建了这个脚本，所以不要严厉地判断:)（并且它是2:28 AM :-D）

Answer 6

在我看来，您的文本实际上应该是一个列表（ol / ul）。这样就可以为jQuery提供一些语义钩子，让事情变得更容易。

Answer 7

尝试this

$("div:contains('Beer')").css("text-decoration", "underline");

jquery：你如何选择不被html标签包围的文本？

7 个答案: