How to treat text with special characters as raw/literal text in textContent or createTextNode?

Question

I want my text to be treated literally. When I write for example "\nraw\t" I want it to be displayed exactly like this - "\nraw\t", not "raw" when I use textContent or createTextNode.

Here is an exemplary HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Raw, ok</title>
    </head>
    <body>
        <div id="first"></div>
        <div id="second">\nRaw\t</div>
        <script>
            document.querySelector("#first").textContent = "\nRaw\t";
        </script>
    </body>
</html>

In div with id "first" I get "Raw" without "\n" and "\t". (This is the unwanted result.)

I'm satisfied with what String.raw`\nRaw\t` returns, but unfortunately, this method is not supported by a few browsers including Opera, so I cannot use it. Any suggestions would be great.

EDIT: Okay, maybe I should have given more details about it and not try to simplify my actual problem. The thing is - it will not always be "\nRaw\t". It can be anything my user provides in a form - so text with no special characters, text with only special characters, anything they want, so I need this solution to be flexible.

Does this answer your question? [Javascript - How to show escape characters in a string?](https://stackoverflow.com/questions/21672334/javascript-how-to-show-escape-characters-in-a-string) — fabian, Aug 15 '21 at 00:16
No, it doesn't. I've tried using JSON.stringify, but then in browser I can see my text in quotes, so "\nRaw\t" not \nRaw\t. — KamilaW, Aug 15 '21 at 00:21
@KamilaWho Yes it does. If the JS code is dynamically generated, you need to properly escape the string - depending on your serverside language. Please show us the code that processes the form. If you're accessing the form value on the clientside, it should work out of the box, as the value doesn't come from a string literal - but that's not the code you've posted. — Bergi, Aug 15 '21 at 01:30
@Bergi, It's a bit more complicated than that, but I didn't want to go into unnecessary details. To keep things short: I have a form in Angular where I get a few values from a user, then I create a script in vanilla JS so that this user can embed it on any page they want and have access to and this way have a floating button to access a chat. Anyway, JSON.stringify() is indeed a good answer, I just needed to get rid of quotes surrounding the text. — KamilaW, Aug 15 '21 at 02:06
@KamilaWho No, you shouldn't need to get rid of the quotes, you should just output them as part of the script, forming the string literal. Like `\`\`` — Bergi, Aug 15 '21 at 02:59
@Bergi, sorry for such a late reply, thank you for this suggestion. It works and I could get rid of slice(), so it doesn't look hacky. — KamilaW, Aug 19 '21 at 11:55

fabian · Answer 1 · 2021-08-15T00:31:12.500

1

If you don't want the string to have the two quotes at the beginning and end like the answer here: Javascript - How to show escape characters in a string?, just use the splice method to cut them away.

const str = JSON.stringify("\nRaw\t")
const cutStr = str.slice(1,str.length-1)
document.querySelector("#p").innerText = cutStr;

<div id="p"><div>

edited Aug 15 '21 at 00:31

answered Aug 15 '21 at 00:25

fabian

268
3
15

Yeah, thank you for your help, I will use this approach as you and Unmitigated suggested. – KamilaW Aug 15 '21 at 00:40

mk23 · Answer 2 · 2021-08-15T01:15:07.160

0

You can escape with a backslash \ Or use JSON.stringify with slice to remove quotes as suggested by others.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Raw, ok</title>
    </head>
    <body>
        <div id="first"></div>
        <div id="second">\nRaw\t</div>
        <script>
            document.querySelector("#first").textContent = JSON.stringify("\nRaw\t").slice(1, -1);
        </script>
    </body>
</html>

edited Aug 15 '21 at 01:15

answered Aug 15 '21 at 00:18

mk23

1,257
1
12
25

Sorry, it doesn't solve my problem. I've just edited my question to be more specific. I need the solution to be flexible - this text can be anything my user provides in a form. – KamilaW Aug 15 '21 at 00:26
Ok... I have updated the answer with other details. – mk23 Aug 15 '21 at 01:16
Sorry, my bad, I should have better phrased my question, but was in a bit of a hurry. I will use JSON.stringify() as everyone suggests. – KamilaW Aug 15 '21 at 02:11

score 0 · Accepted Answer · answered Aug 15 '21 at 00:27

You can use JSON.stringify and then remove the first and last characters (the quotes) using String#slice.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Raw, ok</title>
    </head>
    <body>
        <div id="first"></div>
        <div id="second">\nRaw\t</div>
        <script>
            document.querySelector("#first").textContent = JSON.stringify("\nRaw\t").slice(1, -1);
        </script>
    </body>
</html>

I've actually tried JSON.stringify, but was unhappy with the quotes surrounding my string and the need to use slice on it, I thought I overcomplicated it this way, but I guess it does the job, so I will use it if no one suggests anything better. Thank you. — KamilaW, Aug 15 '21 at 00:34

How to treat text with special characters as raw/literal text in textContent or createTextNode?

3 Answers3