jQuery：如何选择未被HTML标签包围的文本？

Question

jQuery：如何选择未被HTML标签包围的文本？

5

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

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

- g2g23g

7个回答

1

个人而言，我会将它们包装在 <span> 中，这样你就可以更轻松地引用它们了。我正在使用 Russ Cam 的过滤器，所以感谢他（加一）。

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

那么你只需要使用$('.text')和选择器来更轻松地访问它们。

- Mottie

0

怎么样进行一些DOM操作呢？首先选择包含所需字符串的节点，然后运行一个函数，将每个“字符串”的出现替换为“字符串”

我们不需要外部插件来完成这个操作

<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）

- Juraj Blahunka

0

使用.contains方法。请参见使用jQuery查找文本字符串？

- Robert Harvey

0

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

话虽如此，请看一下这个：

如何使用jQuery选择文本节点？

- Tinister

0

在我看来，你的文本实际上应该是一个列表（ol/ul）。这将为jQuery提供一些语义钩子，并使事情变得更加容易。

- Toby Hede

-1

尝试this

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

- Ben Shelock

他没有将它包含在一个 div 中，而且如果这样做的话，那么会给该 div 的所有内容加下划线，而不仅仅是 Beer。 - Mottie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Russ Cam · Accepted Answer

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