英文:
Advanced Recursive Quote Embedding for HTML and Javascript
问题
这是你提供的代码片段，它似乎涉及到HTML和JavaScript的问题。如果你需要帮助来解决这个问题，我可以尝试提供一些建议或解释。不过，请注意，这不是一段完整的程序，只是代码片段，所以无法保证一定能解决你的问题。
以下是代码片段的翻译：
我有一个程序，允许我展示相同代码在多种编程语言中的样子。我将其编译成HTML网页，使用按钮的onclick处理程序来切换用户想要查看的语言。它由于一个复杂的嵌入问题而失败。我认为我正确转义了嵌入的字符，但似乎它们被解释了，导致引号嵌入问题。
这是一个无法工作的按钮示例：
```html
<button onclick="code_box('Example_1','<?php\n# 主程序主体\n echo 'Hello, World!', "\n";\n\n?>\n')" >PHP</button>
我的其他按钮都正常工作，而且大多数情况下过程都很顺利。所以我知道问题不是由于code_box函数或周围的HTML代码中的错误而引起的。我认为（这只是一个猜测），转义字符被Firefox解释了，因为它们包含对HTML有意义的字符，这导致引号嵌入问题。如果是这样的话，那么我不知道如何解决这个问题。
供参考，这是上面的按钮嵌入的PHP代码：
<?php
# 主程序主体
echo 'Hello, World!', "\n";
?>
为了提供更多上下文，这是其他按钮正常工作但此按钮无法工作的完整示例。当我单击PHP按钮时，没有任何反应。当我单击其他任何按钮时，它们都按预期工作。我尝试删除按钮代码中的所有转义HTML实体，它可以工作，但当然代码中缺少所有这些字符。
这是经过一系列调试的最后部分，我将它变得越来越健壮，直到看起来无懈可击，但它仍然无法工作。
非常感谢提前的任何帮助！
如果你需要更多关于如何解决这个问题的帮助，请提供更多具体的信息。
<details>
<summary>英文:</summary>
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','&#60;&#63;php\n# Main Program Body\n echo &#39;Hello, World!&#39;, &#34;\n&#34;;\n\n&#63;&#62;\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!
```<script>
function code_box(Name, Text)
{
var Element = document.getElementById(Name);
Element.innerHTML = Text;
}
</script></head><body>
<div>
<button onclick="code_box('Example_1','module Hello\n{\n main\n {\n write &#34;Hello, World!&#34; line;\n }\n}')">goalspell</button>
<button onclick="code_box('Example_1','if __name__ == &#34;__main__&#34;:\n print(&#34;Hello, World!&#34;)\n\n')">Python</button>
<button onclick="code_box('Example_1','/* Main Program Body */\nlet [_node, _code, ] = process.argv;\nconsole.log(&#34;Hello, World!&#34;);')">Javascript</button>
<button onclick="code_box('Example_1','&#60;&#63;php\n# Main Program Body\n echo &#39;Hello, World!&#39;, &#34;\n&#34;;\n\n&#63;&#62;\n')">PHP</button>
<button onclick="code_box('Example_1','Hello\nHello ; Hello module.\nMAIN() ; main program\n W &#34;Hello, World!&#34;,!\n Q\n\n\n')">MUMPS</button>
<div class="codebox" id="Example_1">module Hello
{
main
{
write "Hello, World!" line;
}
}</div></div>```
</details>
# 答案1
**得分**: 1
不要尝试手动编写所有的转义字符。请使用专为所在编程语言设计的转义数据的函数来执行此操作。
```php
<?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>
英文:
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>
答案2
得分: 0
有时候，你太担心一些超高级的东西，却忽略了一些明显的东西！
在这种情况下，我正在使用一个代码生成器，我竭尽全力确保我的HTML和Javascript字符嵌入是正确的。我发现代码不起作用，尽管我确信嵌入的字符是正确的。我尝试了至少十种不同的（可能是正确的）方法来解决问题。
一点儿帮助都没有。
我曾经想过怪浏览器。然后，当我第一百次进入调试器时，我注意到了我犯的错误。
function code_box(Name, Text)
{
var Element = document.getElementById(Name);
Element.innerHTML = Text;
}
这段代码，在我最初的帖子中显而易见，设置的是innerHTML而不是innerText。这意味着代码需要额外转义一次才能正常工作。而我做出了以下更改。
更正后的代码如下。
function code_box(Name, Text)
{
var Element = document.getElementById(Name);
Element.innerText = Text;
}
解决了整个问题。
多么令人宽慰！
英文:
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!!!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论