如何使用Javascript将带有特殊字符的多行字符串分配给HTML textarea

Question

In Flask I render homepage.html and post back to HTML textarea textid the same text on homepage.html

@app.route('/',methods = ['GET', 'POST'])
def result():
    if request.method == 'POST':
        userdata = request.form['Name']
        return render_template("homepage.html", userdata= userdata)

In HTML homepage.html

<script>
    var fillinuserinput = function(){
        document.getElementById("textid").value = "{{ userdata }}"
   }
</script>

When userdata(html textarea value) is a single line string with no special characters it works. But when its multiline with special characters it fails.

Below is the before text(the text is python code) in userdata(html textarea value):

#!/usr/bin/env python

import string

shift = 3

choice = raw_input("would you like to encode or decode?")

Below is the userdata coming back from Flask:

document.getElementById("textid").value = " #!/usr/bin/env python

import string

shift = 3

choice = raw_input(& # 3 4;would you like to encode or decode? & # 3 4;)

The data coming back I get invalid or unexpected token plus I get the &#34(i do put utf-8 on the client and server side, not sure if this matters)

Any help would be greatly appreciated.

Answer 1

I'm not too familiar with Flask, but most template languages will treat interpolated input as unsafe, and will escape any text you give it. If you want to avoid escaping your input, check out http://flask.pocoo.org/docs/0.12/templating/

According to that page, there are a few options:

1. In the Python code, wrap the HTML string in a Markup object before passing it to the template. This is in general the recommended way.
2. Inside the template, use the |safe filter to explicitly mark a string as safe HTML ({{ myvariable|safe }})
3. Temporarily disable the autoescape system altogether.

To disable the autoescape system in templates, you can use the {% autoescape %} block:

{% autoescape false %}
    <p>autoescaping is disabled here
    <p>{{ will_not_be_escaped }}
{% endautoescape %}

The other related issue is that I assume when you say you have multil-ine input, it is using newlines. Those have no meaning in HTML, so you won't see linebreaks in your output. You would need to replace newlines with <br> tags to actually get them. That, in combination with marking the strings as "safe" should get you the results you're looking for. Keep in mind that you will want to sanitize the input ahead of time, then replace the newlines with <br> tags.