jquery：如何选择没有被 html 标签包围的文本？答案

【问题标题】：jquery: how can you select texts not surrounded by html tags?jquery：如何选择没有被 html 标签包围的文本？
【发布时间】：2010-12-07 16:42:15
【问题描述】：

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

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

【问题讨论】：

标签： jquery

【解决方案1】：

在我看来，您的文本实际上应该是一个列表 (ol/ul)。这会给你一些 jQuery 的语义钩子，让事情变得更容易。

【讨论】：

【解决方案2】：

稍微改变一下 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 :-D）

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

如果您的意思是要直接选择文本节点，建议不要使用 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;
});

【讨论】：

我同意这是最好的解决方案，选择文本节点。问题是....如何遍历所有文本节点？ var texts = $('#parentElement').contents().filter(function() { return this.nodeType === 3 }); texts.each ??
我将更新我的答案以包含一个如何执行此操作的示例
另外，是否可以使用 XPath 选择文本节点？使用 xpath 可能会更容易。

【解决方案5】：

它必须被 something 包围，即使它只是 <body> 标记。如果你有一个 HTML 文档，里面只写了那个，我认为浏览器会为你在 DOM 中隐式放置一个<body>。

话虽如此，看看这个：

How do I select text nodes with jQuery?

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

试试this

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

【讨论】：

他没有将它包含在 div 中，此外，如果是这样，它将强调该 div 的所有内容，而不仅仅是 Beer