获取元素的文本

最新推荐文章于 2024-07-06 03:16:03 发布

cheng5128

最新推荐文章于 2024-07-06 03:16:03 发布

阅读量1.8k

点赞数

文章标签： function javascript 浏览器测试 ruby jquery

本文链接：https://blog.csdn.net/cheng5128/article/details/5303835

版权

记得John Resig说过，类库就是用来屏蔽浏览器的差异，但他的getText函数就明显做不到这一点，怎么没人去提醒他一下呢？我的英文特烂，阅读还可以，但要我正经八儿地写几句英文，估计句句都是病句……不说了，看下面测试(如果在IE下报错，请刷新当前页面)：

IE下明显少了空行与空白，因为IE会自动删除空白节点。所以，要让所有浏览器保持一下，就只有去掉空白节点了。还有，我不明白jQuery会把所有匹配元素的文本串成一个，为何不返回一个字符串数组呢，省得到时我们还要一个个分解……

下面是我的方案：


      //@author:司徒正美(zhongqincheng)
      //获取某个节点的文本，如果此节点为元素节点，则取其childNodes的所有文本，
      //为了让结果在所有浏览器下一致，忽略所有空白节点，因此它非元素的innerText或textContent
      var getText = function(nodes){
        var result = "",node;
        for(var i=0,n=nodes.length;i<n;i++){
          node = nodes[i];
          //如果是文本节点或者CDATA节点
          if ( node.nodeType === 3 || node.nodeType === 4 ) {
            if(!/^/s+$/.test(node.nodeValue))//忽略空白节点与换行符
              result += node.nodeValue;
            //如果是元素节点
          } else if ( node.nodeType === 1 ) {
            result += getText( node.childNodes );
          }
        }
        return result;
      }

看一下效果：

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
    <script type="text/javascript">

//@author:司徒正美(zhongqincheng)
      //获取某个节点的文本，如果此节点为元素节点，则取其childNodes的所有文本，
      //为了让结果在所有浏览器下一致，忽略所有空白节点，因此它非元素的innerText或textContent
      var getText = function(nodes){
        var result = "",node;
        for(var i=0,n=nodes.length;i<n;i++){
          node = nodes[i];
          如果是文本节点或者CDATA节点
          if ( node.nodeType === 3 || node.nodeType === 4 ) {
            if(!/^/s+$/.test(node.nodeValue))
              result += node.nodeValue;
            //如果是元素节点
          } else if ( node.nodeType === 1 ) {
            result += getText( node.childNodes );
          }
        }
        return result;
      }
      window.onload = function(){
        var p = document.getElementsByTagName("p");
        alert(getText(p))
      }

</script>
    <title>jQuery.text测试 by 司徒正美</title>
  </head>
  <body>

<p>司徒正美<br/>
      
      <a href="javascript:void(0)" href="http://www.cnblogs.com/rubylouvre/">Ruby's Louvre</a>
    </p>
    <p>司徒正美</p>

</body>
</html>