Firefox's textContent doesn't match Chrome's innerText
Since Firefox doesn't have innerText, I am using textContent to retrieve the text of the body of a document. However, textContent returns anything within noscript
and script
tags that are in the body (and maybe other tags, I'm not thoroughly sure), which means that textContent will look different that what is normally returned by innerText.
Is there an equivalent in Firefox that return开发者_StackOverflow中文版s the same output as Chrome's innerText function?
Edit
Included filter to not get content of certain elements
They are two different properties - one is defined in the W3C DOM 3 Core, the other is a Microsoft proprietary property that has been widely copied but has no open specification.
Probably the best way to normalise the two is to not use them, instead use a DOM-walking routine that collects text nodes and creates a string. Use the same routine for both (all) browsers.
// 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('');
}
See this:
http://www.davidtong.me/innerhtml-innertext-textcontent-html-and-text/
Basically you can use jQuery's text() method, or if you also want the linebreaks, he has his own plugin code on that URL.
Whenever 2 browsers are different, I would advise you to research jQuery as a solution.
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));
if you want to make it browser independent use this code
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;
}
The solution I used that worked for both Chromium and Firefox on Linux was to address the childNodes
of the object. Each of the nodes has a valid textContent
property which returns just the text, to wit:
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
Of course, this needs to be confirmed on mobile browsers, IE *shudder* and versions {alpha .. omega}, but it's a start.
精彩评论