Using Javascript's eval() on HTML Text

Question

I am toying around with some basic constructs in HTML and Javascript (i.e., I am a HTML/Javascript n00b), and there is a feature I simply cannot seem to implement properly. In a nutshell, I'd like to grab text from the body of an HTML page and evaluate it using Javascript (either eval() or new Function()). To see that my use of eval() is right, I first tried the following code, which works as expected (and displays the value 5):

<script>
window.onload = function () {
    eval("var t = function () { if (5>0) return 5; }();");
    document.body.innerHTML = t;
}
</script>

However, when I then attempt to achieve my goal of grabbing the "code" from the HTML and running it, this seems to fail for me. Here's a piece of code that doesn't work (I've tried many variations of this):

<script>
window.onload = function() {
    var x = document.getElementById("myP").innerHTML;
    eval("var e = " + x + ";");
    document.body.innerHTML = e();
}
</script>

<body>
    <p id="myP">function () { if (5>1) { return 5; } } </p>
</body>

I tested that the variable x does in fact contain the desired "code" from the body. But for some reason, the above will just not work correctly; it will just display the body and ignore the eval and the statement after it updating the innerHTML.

What's stranger is that when I try code that is "more complex", it works fine, such as:

<script>
window.onload = function() {
    var x = document.getElementById("myP").innerHTML;
    eval("var e = " + x + ";");
    document.body.innerHTML = e();
}
</script>

<body>
    <p id="myP">function () { var a = []; var b = [1,2,3]; for (var i in b) { a.push([b[i],'q']); } return a; } </p>
</body>

It seems really weird to me that this example should work but not the previous one; does eval() hate if-statements? Am I missing some subtle aspect of eval()? Am I missing some super-basic Javascript syntax? Any help is appreciated, both in getting the above particular instance to work, as well as advice for how to implement what I am trying to do generally, i.e. to pass any code from HTML to eval().

NOTE: If possible, please avoid any comments/answers about how eval() is "evil" or is a major security issue, or any such remarks. I am aware of these concerns. My issue is within the context of a personal project and has no chance of being publicly deployed or used unsafely etc.

What is the e() you are trying to execute? Trying doing just document.body.innerHTML = e; — khalid13
– khalid13, Commented May 18, 2015 at 18:42
@khalid13 its in the statement executed by the eval(); its assigned a function, hence the e(). it executes fine in my 3rd code example... — Coffee_Table
– Coffee_Table, Commented May 18, 2015 at 18:44
It's probably an encoding issue, like certain characters being converted to their HTML Entity versions. — Paul
– Paul, Commented May 18, 2015 at 18:47
To avoid the problem that James described you can enclose in a template. See this post for more information: Explanation of <script type = “text/template”> — Yogi
– Yogi, Commented May 18, 2015 at 19:02

James Allardice · Accepted Answer · 2015-05-18 19:01:53Z

6

The problem here is related to the DOM, rather than JavaScript. You're asking for the innerHTML of a node. If you have a look at what you end up with the problem becomes clear:

var x = document.getElementById("myP").innerHTML;
console.log(x); // "function () { if (5&gt;1) { return 5; } }"

The browser has converted the > character into an HTML entity. What you need is the textContent of the node:

var x = document.getElementById("myP").textContent;
console.log(x); // "function () { if (5>1) { return 5; } }"

Here's a working example.

edited May 18, 2015 at 19:01

answered May 18, 2015 at 18:45

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Coffee_Table Over a year ago

out of curiosity, I notice you use both "innerText" and "textContent"; would you mind briefly commenting on the difference?

James Allardice Over a year ago

@Coffee_Table sorry, it should have been textContent. innerText was introduced in Internet Explorer and AFAIK isn't part of a standard. Most browsers will support it but textContent is preferable for reasons discussed in the linked textContent page.

Collectives™ on Stack Overflow

Using Javascript's eval() on HTML Text

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related