Firefox的textContent与Chrome的innerText不匹配

时间:2011-06-07 23:35:05

标签: javascript firefox google-chrome innertext

由于Firefox没有innerText,我使用textContent来检索文档正文的文本。但是,textContent返回正文中的noscriptscript标记内的任何内容(可能还有其他标记,我不完全确定),这意味着textContent看起来与通常返回的内容不同的innerText。

Firefox中是否存在与Chrome的innerText函数返回相同输出的等效项?

5 个答案:

答案 0 :(得分:4)

修改

包含过滤器以获取某些元素的内容

它们是两个不同的属性 - 一个在W3C DOM 3 Core中定义,另一个是Microsoft proprietary property,已被广泛复制但没有开放规范。

将两者标准化的最佳方法可能是不使用它们,而是使用DOM行走例程来收集文本节点并创建字符串。对两个(所有)浏览器使用相同的例程。

// Get the text within an element
// Doesn't do any normalising, returns a string
// of text as found.
function getText(element) {
  var text = [];
  var self = arguments.callee;
  var el, els = element.childNodes;
  var excluded = {
    'noscript': 'noscript',
    'script'  : 'script'
  };

  for (var i=0, iLen=els.length; i<iLen; i++) {
    el = els[i];

    // May need to add other node types here
    if ( el.nodeType == 1 && 
       !(el.tagName.toLowerCase() in excluded)) {
      text.push(self(el));

    // If working with XML, add nodeType 4 to get text from CDATA nodes
    } else if (el.nodeType == 3) {

      // Deal with extra whitespace and returns in text here.
      text.push(el.data);
    }
  }
  return text.join('');
}

答案 1 :(得分:1)

见:

http://www.davidtong.me/innerhtml-innertext-textcontent-html-and-text/

基本上你可以使用jQuery的text()方法,或者你也想要换行,他在这个URL上有自己的插件代码。

每当2个浏览器不同时,我建议你研究jQuery作为解决方案。

答案 2 :(得分:0)

function deepText(node) {
    var A= [];
    if(node) {
        node= node.firstChild;
        while(node!= null) {
            if(node.nodeType== 3) {
                if(/\S/.test(node.data)) A[A.length] = node.data;
            }
            else A = A.concat(deepText(node));
            node = node.nextSibling;
        }
    }
    return A;
}
alert(deepText(document.body));

答案 3 :(得分:0)

如果你想让浏览器独立使用这个代码

var field = document.getElementById(id);  // where u want to use innertext

if(field != null)
{
     if(navigator.appName == "Netscape") // appName for both FireFox and Chrome its is "Netscape" i checked it with different version.
           field.textContent = value;
     else // for For IE v 8 i checked  .textContent is not supported by IE for me it was not working.
           field.innerText = value;
}

答案 4 :(得分:0)

我在Linux上用于Chromium和Firefox的解决方案是解决对象的childNodes问题。每个节点都有一个有效的textContent属性,只返回文本,即:

var element = document.getElementById(element_id);

// here element_id is an element which contains text, then
// a child <p> whose text will be used for something else.
// e.g. <li>string1<p>string2</p></li>

var first = element.childNodes[0].textContent; // string1
var second = element.childNodes[1].textContent; // string2

当然,这需要在移动浏览器上确认,IE * shudder *和版本{alpha .. omega},但这是一个开始。