JavaScript:: Is innerText safe to use? [duplicate] - javascript

This question already has answers here:
'innerText' works in IE, but not in Firefox
(15 answers)
Closed 9 years ago.
I've heard that using el.innerText||el.textContent can yield unreliable results, and that's why I've always insisted on using the following function in the past:
function getText(node) {
if (node.nodeType === 3) {
return node.data;
}
var txt = '';
if (node = node.firstChild) do {
txt += getText(node);
} while (node = node.nextSibling);
return txt;
}
This function goes through all nodes within an element and gathers the text of all text nodes, and text within descendants:
E.g.
<div id="x">foo <em>foo...</em> foo</div>
Result:
getText(document.getElementById('x')); // => "foo foo... foo"
I'm quite sure there are issues with using innerText and textContent, but I've not been able to find a definitive list anywhere and I am starting to wonder if it's just hearsay.
Can anyone offer any information about the possibly lacking reliability of textContent/innerText?
EDIT: Found this great answer by Kangax -- 'innerText' works in IE, but not in Firefox

It's all about endlines and whitespace - browsers are very inconsistent in this regard, especially so in Internet Explorer. Doing the traversal is a sure-fire way to get identical results in all browsers.

Related

Unsafe assignment to innerHTML [duplicate]

This question already has an answer here:
Best way to purge innerHTML from a Firefox Extension
(1 answer)
Closed 2 years ago.
I was trying to get an add on for Firefox signed by Mozilla so I could use it on the stable version of firefox and I'm getting this validation issue.
Can someone help me understand what it is?
Unsafe assignment to innerHTML
Warning: Due to both security and performance concerns,
this may not be set using dynamic values which have not been adequately sanitized.
This can lead to security issues or fairly serious performance degradation.
datetime.js line 4 column 5
function updateClock(){
var doc=window.content.document
var dt = new Date();
doc.getElementById("datetime").innerHTML = dt.toLocaleTimeString();
}
setInterval(updateClock, 0);
dt.toLocateTimeString() return a String instead of HTML.
Instead of, use innerText or textContent:
doc.getElementById("datetime").innerText = dt.toLocaleTimeString();
doc.getElementById("datetime").textContent = dt.toLocaleTimeString();

Javascript unescape doesn't seem to work [duplicate]

This question already has answers here:
Unescape apostrophe (') in JavaScript?
(2 answers)
Closed 8 years ago.
I have a simple string which is
Company's
Now I have some javascript which is ran when a form is submitted
var jsCompanyName = '#Model.Name';
var unescapedCompanyName = unescape(jsCompanyName);
$('.selector-input').val(unescapedCompanyName);
$('.selector-input-id').val('#Model.Id');
Going thought with a debugger, my var unescapedCompanyName is still "Company's" even after the unescape function, does anyone have any idea on why this isn't removing ' and replacing it with a '
The unescape() function has nothing to do with HTML syntax. It's for handling escapes in URL syntax, which is a completely different thing. (It's also deprecated even for its intended purpose.)
There's no built-in function to deal with HTML escapes. However, code running in a web browser can do something like this:
function html_unescape(s) {
var div = document.createElement("div");
div.innerHTML = s;
return div.textContent || div.innerText; // IE is different
}
You can do this easily with JQUERY if you really need to:
function htmlDecode(value) {
return $('<div/>').html(value).text();
}
var str = 'Company's';
console.log(htmlDecode(str)); // Company's
JSFIDDLE.

How to detect whether browser supports :invalid pseudoclass? [duplicate]

This question already has answers here:
Test if a browser supports a CSS selector
(5 answers)
Closed 8 years ago.
I tried to use Modernizr, but it seems not to support this feature detection.
I also read that it is difficult or even inmpossible to access pseudoclasses from javascript, because they are not part of DOM. So, after surfing the web I found no relevant information.
I need an easy solution without the need to download heavy libraries.
Can anybody help me with this?
Thanks
Trap an error from querySelector or matches, which parses the selector and throws an error if it is not valid:
function invalid_pseudoclass_support () {
var support = true;
try {
document.querySelector(':invalid');
} catch (e) {
support = false;
}
return support;
}

Determine type of an element in Javascript [duplicate]

This question already has answers here:
How to get the name of an element with Javascript?
(5 answers)
Closed 9 years ago.
I have this code:
var parent = links[i].parentNode;
I'd like to write something like:
if (parent.typeOfElement == "div") {
...
}
How can I do that?
You can use .tagName, which is (for elements) the same as .nodeName.
So:
if (parent.tagName === "DIV") {
//
}
Note that the tag name is supposed to be returned in uppercase for HTML, but in XML (including xhtml) it is supposed to preserve the original case - which for xhtml means it should be lowercase. To be safe, and allow for any future changes to your document type and allow for non-standard browser behaviour you might want to convert to all upper or all lower:
if (parent.tagName.toUpperCase() === "DIV") {
//
}
In my experience .tagName is used much more often, but I gather that some consider .nodeName a better choice because it works for attributes (and more) as well as elements.
if (parent.nodeName == "div") {
...
}
See: http://www.javascriptkit.com/domref/elementproperties.shtml

document.createElement throwing error in IE 8. This command is not Supported ERROR [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Javascript doesn't work in IE8
I have the following code
var ind=1;
try
{
rdo = document.createElement('<input type="radio" name="radioOptions" />');
}
catch(err)
{
rdo = document.createElement('input');
}
rdo.setAttribute('type','radio');// error
rdo.setAttribute('name','radioOptions');
rdo.id = 'radioOption_'+ind;
rdo.value = ind;
After a thorough checkup this line is throwing error on IE 8
rdo.setAttribute('type','radio')
and a strange fact is that when it is on the local system its not doing that.
I am dynamically adding this radio input to the form. And the Doc type i have set to
<!doctype html>
Any Idea what should work for all Browsers including the ASS HOLE IE
You can not change the type of input elements in IE with setAttribute(). You could try with rdo.type = 'radio' (which should work) or (ugh) innerHTML.
Also, document.createElement() is used with the element's name, i.e. input. It is not like $() in jQuery or similar libraries.

Categories

Resources