jquery：如何选择不包含html标签的文本？

7

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

来源

2009-10-17 23:27:57

+0

我同意这是最好的解决方案，通过选择文本节点。问题是....你如何遍历所有的文本节点？内容（）。filter（函数（）{返回this.nodeType === 3}）; texts.each ?? – g2g23g

+0

我会更新我的答案，包括如何做到这一点的示例 –

+0

也可以使用XPath选择文本节点吗？使用xpath可能更容易。 – g2g23g

-1

尝试this

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

来源

2009-10-17 23:24:36

+0

他没有包含在'div'中，除此之外，如果是这样会强调该div的所有内容，而不仅仅是Beer – Mottie

0

使用.contains方法。请参阅Find text string using jQuery?

来源

2009-10-17 23:25:31

0

那么它必须被围绕，即使它只是<body>标记。如果你有一个HTML文件，只要写上它，我就会认为浏览器会隐式地在你的DOM中放入一个<body>。

话虽这么说，看看这个：

How do I select text nodes with jQuery?

来源

2009-10-17 23:26:04 Tinister

1

就个人而言，我会将它们包装在<span>中，然后您可以更容易地引用它们。我用拉斯凸轮的过滤器，所以道具（+1），以他

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

然后，你可以使用$('.text')和选择更方便地访问它们。

来源

2009-10-18 00:24:26 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 AM :-D）

来源

2009-10-18 00:28:18

0

它在我看来你的文本应该是一个列表（ol/ul）。这会给你一些jQuery的语义钩子，并使事情变得更容易。

来源

2009-10-18 00:30:57

jquery：如何选择不包含html标签的文本？

回答

相关问题