【问题标题】:Find ANY text without tags查找任何没有标签的文本
【发布时间】:2015-02-22 11:44:32
【问题描述】:

我有一些没有标签的文本。我试图找到它。使用 jQuery

(这是动态文本,所以我不知道我有多少文本和平或它们在哪里。我只知道在 div 内。这与周围的其他问题不同)

我可以找到一个解决方案来查找没有标签的文本,将其包装在 <p> 中,但这也会生成一些空的 p 标签。所以问题是:
- This.nodeType===3 似乎可以找到文本和空格。谁能解释一下?
- 有人可以解决这个问题或展示另一种方法来仅查找没有标签的文本吗?

(我可以找到 nodeType===3 “表示元素或属性中的文本内容”)

如果你喜欢在那里玩,请在小提琴:http://jsfiddle.net/bhpaf8hu/

$("#tot").click(function() {
				
	$("div").contents().filter(function() {
		return this.nodeType === 3;
	}).wrap("<p>");
	
});
p { background:green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="tot"> 
    <h1> This is a h1</h1>
    Text without p
    <br>
    Another text without p
    <br>
    <p>This text has p</p>
</div>

预期的解决方案:所以我想找到没有标签的文本并将其包装在 p 标签中。在示例中,这就是我要查找的内容:

<div id="tot"> 
    <h1> This is a h1</h1>
    <p>Text without p</p>
    <br>
    <p>Another text without p</p>
    <br>
    <p>This text has p</p>
</div>

【问题讨论】:

  • 好的,你可以找到它们,然后用它们做什么?
  • 在这个简化的例子中,我用 p 换行。但它似乎也找到了空间

标签: jquery


【解决方案1】:

避免换行和空格的一种解决方案是使用以下修剪:

$("#tot")
    .contents()
    .filter(function () {
    // get only the text nodes
    return this.nodeType === 3 && this.nodeValue.trim() !== "";
}).wrap("<p />");

fiddle

参考文献

Node.nodeValue

String.prototype.trim()

【讨论】:

  • AFAIK .trim() 不过会错过换行符和制表符。 :)
  • 你能解释一下:!=="" 这到底是做什么的?
  • 从包装中排除包含空格的元素。如果您的意思是 !==:不进行类型转换的不相等比较:如果操作数不相等或它们的类型不同,则返回 true。
【解决方案2】:

您可以使用$.trim() 删除文本节点字符串开头和结尾的所有换行符、空格(包括不间断空格)和制表符。

这将过滤掉那些只有空格、制表符或换行符的文本节点。

下面是fork of your fiddle 和相应的sn-p。

$("#tot").click(function() {
				
	$("div").contents().filter(function() {       
		return     this.nodeType === 3 
                && $.trim($(this).text()) != '';
	}).wrap("<p>");
	
});
p { background:green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="tot"> 
    <h1> This is a h1</h1>
    Text without p
    <br>
    Another text without p
    <br>
    <p>This text has p</p>
</div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-09-13
    • 1970-01-01
    • 2016-01-10
    • 1970-01-01
    • 2012-01-21
    • 1970-01-01
    • 2013-02-21
    • 1970-01-01
    相关资源
    最近更新 更多