如何在JavaScript中获取没有子元素的元素的文本
How can I get the text of an element without children in JavaScript?
如何在没有子元素的情况下获取元素的文本?element.textContent
和element.innerText
似乎都不起作用。
HTML:
<body>
<h1>Test Heading</h1>
<div>
Awesome video and music. Thumbs way up. Love it. Happy weekend to you and your family. Love, Sasha
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
fool("body");
</script>
这是fool
函数:
jQuery.fn.justtext = function(text) {
return $(this).clone()
.children()
.remove()
.end()
.text();
};
function fool(el) {
reverse(el);
function reverse(el) {
$(el).children().each(function() {
if($(this).children().length > 0) {
reverse(this);
if($(this).justtext() != "")
reverseText(this);
} else {
reverseText(this)
}
});
}
function reverseText(el){
var text = el.textContent;
var frag = text.toString().split(/ /);
var foo = "";
var punctation_marks = [".",",","?","!"," ",":",";"];
for(i in frag){
if(punctation_marks.indexOf(frag[i]) == -1)
foo += actualReverse(frag[i],punctation_marks) + " ";
}
el.textContent = foo;
}
function actualReverse(text,punctation_marks) {
return (punctation_marks.indexOf(text.split("")[text.split("").length-1]) != -1)?text.split("").slice(0,text.split("").length-1).reverse().join("") + text.split("")[text.split("").length-1] : text.split("").reverse().join("");
}
}
edit:使用node.nodeType
并没有真正的帮助,原因如下:想象以下HTML
<td class="gensmall">
Last visit was: Sat Mar 31, 2012 10:50 am
<br>
<a href="./search.php?search_id=unanswered">View unanswered posts</a> | <a href="./search.php?search_id=active_topics">View active topics</a>
</td>
如果我使用nodeType
,则只有a
元素的文本会更改,而不会更改td
本身("上次访问……")
只需找到文本节点:
var element = document.getElementById('whatever'), text = '';
for (var i = 0; i < element.childNodes.length; ++i)
if (element.childNodes[i].nodeType === Node.TEXT_NODE)
text += element.childNodes[i].textContent;
编辑—如果想要子代("children")节点中的文本,并且(现在很明显)您使用的是jQuery:
$.fn.allText = function() {
var text = '';
this.each(function() {
$(this).contents().each(function() {
if (this.nodeType == Node.TEXT_NODE)
text += this.textContent;
else if (this.nodeType == Node.ELEMENT_NODE)
text += $(this).allText();
});
});
return text;
};
等一下,我会测试一下:-)(似乎有效)
这段代码实现了与其他两个答案相同的结果,但采用了更具表现力和功能性的方式。所有现代浏览器(IE9及以上版本)都支持filter
和map
数组方法。
把这个放在那里,因为其他答案现在有点过时了。
var content = Array.prototype.filter.call(element.childNodes, function (element) {
return element.nodeType === Node.TEXT_NODE;
}).map(function (element) {
return element.textContent;
}).join("");
元素的文本也是一个单独的节点。考虑一下这段代码:
<span>
Some text
<span>Inner text</span>
More text
<span>More inner text</span>
Even more text
</span>
你现在说你想要元素的文本是什么意思?只是直接的孩子?
那么这段代码可能会有所帮助:
for (var element in elements) {
if (element.nodeType == Node.TEXT_NODE) {
// do something
}
}
除了Pointy这样的答案外,还可以这样处理<br/>
的换行符:
txt = '';
for (var i = 0; i < element.childNodes.length; ++i)
if (element.childNodes[i].nodeType == 3) {
txt += element.childNodes[i].textContent;
} else if (element.childNodes[i].nodeType == 1) {
name = element.childNodes[i].nodeName || element.childNodes[i].tagName || '';
if (name.toUpperCase() == 'BR') {
txt += ''n';
}
}
return txt;
相关文章:
- 识别切换条元素文本并在量角器中单击它
- 数组函数不适用于从元素文本创建的JavaScript数组
- 将元素文本替换为子项中的值
- 如何在不丢失格式的情况下连续淡入() 元素文本的每个字符,包括嵌套元素
- 使用 jQuery 从目标页面而不是当前页面获取元素文本
- 使用jquery为html元素文本的每个字符设置动画
- regex替换元素文本
- 在 Firefox 中单击鼠标时无法选择所有输入元素文本
- 如何确定 HTML 元素文本中“新行”的位置
- 在量角器中将元素文本转换为对象
- 无法使用 jquery 获取 xml 元素文本值
- jQuery - 仅获取父元素文本,而不获取子元素文本
- 单击其他元素(文本输入)时显示下拉列表
- 使用自定义绑定更新元素文本
- Android驱动程序的scrollTo和scrollToExact 方法的问题.方法不会滚动到所需的元素文本,而是滚动
- 选择元素文本并添加逗号
- 获取不带 html 标记的页面元素文本,但保留换行符
- 删除元素文本中的最后一个字符
- 如何按顺序获取所有元素文本
- 使用AngularJS将元素文本复制到title属性的干净方法