Using Javascript's eval() on HTML Text

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 plex", 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 ments/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.

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

<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>

What's stranger is that when I try code that is "more plex", 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>

Share Improve this question edited May 18, 2015 at 18:42 Eugene J. Lee 5802 silver badges10 bronze badges asked May 18, 2015 at 18:36 Coffee_Table 2842 gold badges5 silver badges14 bronze badges

What is the e() you are trying to execute? Trying doing just document.body.innerHTML = e; – 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 Commented May 18, 2015 at 18:44
1 It's probably an encoding issue, like certain characters being converted to their HTML Entity versions. – Paul Commented May 18, 2015 at 18:47
1 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 Commented May 18, 2015 at 19:02

Add a ment |

1 Answer 1

Sorted by: Reset to default 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 bees 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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Using Javascript's eval() on HTML Text - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)