C# Programming > Web

Javascript Multi-line String
Utility

Multiline Strings in Javascript

Most web developers nowadays have had to deal with javascript at one point or another. While javascript is an extremely powerful tool for programming web applications, it has many shortcomings. Among them is a particularly minor annoyance, which is that there is no straightforward way to declare multi-line strings in javascript.

An alternative is to use a regular string for each line and concatenate them together like so:

"line 1" +
"line 2" +
"line 3"

This can be very time consuming to write, especially if you have an existing block of text you want to assign to a variable during coding. So what we are going to do is write a tool in C# to convert a block of text into a javascript-friendly string.

Formatting a Line

Formatting a single line is extremely simple: add quotes around the line of text and follow it up with an addition symbol (except for the last line of course).

"[line]" +

There is one thing we have to consider, if the original string already has quotes this will produce an invalid javascript string. So instead of double-quotes let's use single-quotes and escape any existing single quotes:

original text: I don't know
escaped text: I don\'t know
javascript string: 'I don\'t know' +

//C# code
string text = "I don't know";
string escaped = text.Replace("'", @"\'");
string javascript = "'" + escaped + "'" + " +";          

Blocks of Text

To format a block of text, we can simply go through each line of text and format it. In C# an easy way to read a string line-by-line is with the System.IO.StringReader class.

using System.IO;

//...

StringBuilder writer = new StringBuilder();
using (StringReader reader = new StringReader(blockText))
{
    while (reader.Peek() != -1)
    {
        string line = reader.ReadLine();
        
        //Format the line
        line = line.Replace("'", @"\'");
        line = "'" + line + "'";

        //Add a '+' if this is not he last line
        if (reader.Peek() != -1)
            line += " +";

        writer.AppendLine(line);
    }
}

Here we can add a very useful optional feature. Imagine that you copy a chunk of HTML code that you want to convert into a string. Chances are, that HTML code is going to be indented to give it structure (easier to read). We can have our javascript multi-line tool remove as much whitespace as possible from the beginning of each line while preserving the structure.

The trick is to first scan all the lines in the text and look for the minimum amount of space to remove, then remove that amount from all the lines.

If you would like to see the source code for this function download the project files at the end of the article, it is included.

String to Plain-text

Another useful feature is to convert those javascript strings back to plain text, this way we can easily make modifications and then re-covert the string back to a multi-line string.

This part is easier since we just have to remove the quotes around the text and the concatenation operators:

'javascript string' +
becomes
javascript string

Then we remove the backslashes that escaped existing single-quotes:

I don/'t know
becomes
I don't know

That's it, if we process each line individually, the result will be a string back in its original format.

Final Notes

Keep in mind that this is intended to make it easier for someone writing a web application to visualize multi-line strings in the javascript code. When javascript executes the code, the string will actually be a single line in memory. To create a string that is actually multiple lines then you have to explicitly add a line-separator (<br /> for example) at the end of each line.

For the actual C# implementation of the ideas discussed above, please download the c# source code below.

Back to C# Article List