Question 43239 in Html Question posted in
Some basic documentation can be found here.

Advanced Recursive Quote Embedding for HTML and Javascript

I have a program that lets me show what the same code would look like in multiple programming languages. I’m compiling it to a web page in HTML, which uses button onclick handlers to switch the code over to whatever language the user wants to see. It fails due to a complex embedding problem. I think I’m escaping the embedded characters correctly, but it seems they are being interpreted and it is causing a quote embedding problem.

Here is an example of a button that fails to work.

<button onclick="code_box('Example_1','<?phpn# Main Program Bodyn echo 'Hello, World!', "n";nn?>n')">PHP</button>

All my other buttons are working, and the process is smooth in most cases. So I know it’s not caused by a bug in the code_box function or the surrounding html code. I think (and it’s just a guess) that the escaped characters are being interpreted by Firefox and because they contain characters that are meaningful to HTML, it is causing a quote embedding problem. If that’s the case, then I’m stumped as to how to solve the problem.

For reference, here is the PHP code that is being embedded by the above button.

<?php
# Main Program Body
    echo 'Hello, World!', "n";

?>

And to provide greater context, here is the full example where the other buttons work, but this button does not. Everything else works, and I’m not able to continue adding languages until I figure this out.

When I click on the PHP button, nothing happens. When I click on any of the other buttons, they work as expected. I have tried removing all the escaped HTML entities from the button code, and it works but of course the code is missing all those characters.

This is at the end of a long sequence of debugging where I made it more and more robust until it looked foolproof, and yet it still doesn’t work.

Thanks in advance for any help!

    function code_box(Name, Text)
    {
        var Element = document.getElementById(Name);
        Element.innerHTML = Text;
    }
</script></head><body>
<div>
<button onclick="code_box('Example_1','module Hellon{n    mainn    {n        write "Hello, World!" line;n    }n}')">goalspell</button>
<button onclick="code_box('Example_1','if __name__ == "__main__":n    print("Hello, World!")nn')">Python</button>
<button onclick="code_box('Example_1','/* Main Program Body */nlet [_node, _code, ] = process.argv;nconsole.log("Hello, World!");')">Javascript</button>
<button onclick="code_box('Example_1','<?phpn# Main Program Bodyn    echo 'Hello, World!', "n";nn?>n')">PHP</button>
<button onclick="code_box('Example_1','HellonHello ; Hello module.nMAIN() ; main programn W "Hello, World!",!n Qnnn')">MUMPS</button>
<div class="codebox" id="Example_1">module Hello
{
    main
    {
        write "Hello, World!" line;
    }
}</div></div>```
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Sometimes you are so worried about something super-advanced, you fail to see something obvious!

    In this case, I am using a code generator where I go to great lengths to make sure I get the HTML and Javascript character embeddings right. I saw that the code was not working even though I was sure the embedded characters were correct. I tried at least ten distinct (probably correct) ways to fix the problem.

    Nothing helped.

    I was tempted to blame the browser. Then when I was back in the debugger for the hundredth time scratching my head, I noticed what I was doing wrong.

    function code_box(Name, Text)
{
    var Element = document.getElementById(Name);
    Element.innerHTML = Text;
}

    This code, which is plain as day in my original post, is setting the innerHTML rather than the innerText. It means that the code needs to be re-escaped an additional time in order to work. Instead of doing that, I made the following change.

    The corrected code is as follows.

    function code_box(Name, Text)
{
    var Element = document.getElementById(Name);
    Element.innerText = Text;
}

    Solves the whole problem.

    What a relief!!!


  2. 0

    Don’t try to write all your escapes by hand. Do it with functions designed to escape data for the language you are working in.

    <?php
    $string = "The string
you want to show
which can have just about
any literal characters in it
although you need to take care
of $ and " as they are 
special in PHP!";

    # You can generate JS source code using json_encode since JSON is
    # more-or-less a subset of JS.
    $javascript_literal = json_encode($string);

    # Then write your JavaScript expression and convert it to HTML
    $javascript_expression = "code_box('Example_1', $javascript_literal);"
    $html_attribute_value = htmlspecialchars($javascript_expression);
?>
<button onclick="<?php echo $html_attribute_value ?>">Value</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search