Posts Tagged ‘ 文本

《精通JavaScript》笔记——获取文本内容的通用函数

以前写过一篇博文《获取元素文本内容》,但功能过于简单,它只能获取元素自身所包含的文本内容,而对于它的子元素内的文本内容就无能为力了。今天在看《精通JavaScript》时看到了一个更好的方法,不仅能兼容各种浏览器,而且还可以提取所有子元素内的文本内容。代码如下:

function getText(e){
	var t="";

		// 如果传入的是元素,则继续遍历其子元素,
		// 否则假定它是一个数组
		e=e.childNodes || e;

		for(var j=0;j<e.length;j++){
			// 如果不是元素,追加其文本值
			// 否则,递归遍历所有元素的子节点
			t+=e[j].nodeType!=1?
			e[j].nodeValue:getText(e[j].childNodes);
		}

		// 返回匹配的文本
		return t;
	}
}

这样你就能拥有一个能获取任何元素文本内容的兼容方法,无论是在XHTML还是在XML文档中都能使用。

获取元素文本内容

要获得一个元素的文本内容,简单地可以用以下代码:

elementContent = bodyElement.firstChild.nodeValue;

但如果一个元素中有多行文本,如:

第一行文本
第二行文本
第三行文本
第四行文本
第五行文本

firstChild.nodeValue的方法只能取得第一行的文本内容,如果要想获得元素内所有的文本内容,在IE中就要用到innerText火狐不支持innerText,但火狐有个与innerText相似的功能:textContent。一个简单通用代码如下:

elementContent = bodyElement.innerText||bodyElement.textContent;

这种方法在IE火狐谷歌浏览器以及Opera都能正常运行。