View Source Chart

Creating Line Breaks In JavaScript Strings

Perhaps not obvious to you while reading the previous string concatenation lesson was how the resulting strings printed to alert boxes were output onto a single line. While this is acceptable when working with short strings, string output will often be too long to be readable on one line.

The Newline Character \n

To keep long concatenation output readable, JavaScript provides two ways to create line breaks within your string. The first is the newline character ( \n ). The newline character creates line breaks within the output of a string, be it simply text or JavaScript-generated HTML.

Here is a long string without line breaks:

var noBreaks = "Hello World. My name is Jennifer. What is your name?"


Try it:

<a href="javascript:alert(noBreaks)">Long String without Line Breaks</a>

Now see what happens to the same string when line breaks are included:

var withBreaks = "Hello World. \n My name is Jennifer. \n What is your name?"


Try it:

<a href="javascript:alert(withBreaks)">Long String with Line Breaks</a>

Formatting Generated HTML with the Newline Character

When I say output, I mean not just output viewable to the end user as in the case of a dialog box, but also HTML output that will eventually be printed to a page with JavaScript. Note that HTML output is rendered by the browser, making any formatting of the HTML of no consequence to the end user. It is the scripter who benefits from cleanly formatted source code.

When you create a plain HTML page and view it in your browser, if it doesn't look right, what do you do? You look at the source code. It is no different when you generate an entire page with JavaScript and something doesn't look right - you should check your HTML. But since all you will see is JavaScript in your text editor, you need a way to view the rendered source in a clean, readable format. You can use an alert dialog box to view it, or a cool little program written by Bill Friedrich that you can install on your computer. See the Troubleshooting lesson for more information and to download the program.

Remember - the newline character will only create a break in source code, or in a dialog box as in the above examples. The newline character will not create a break in the rendered HTML. To create a line break in rendered HTML, you must use the HTML break tag (or similar tag) in the string just as if you were writing source code in an editor.

Formatting Style Sheet Code

Using the newline character to format source code is also handy when you use JavaScript to mimic embedded style sheets. Saving style rules as segmented JavaScript strings in an external .js file, then invoking document.write() to write the style string directly to your page gives you all the benefits of a single linked style sheet, but has the "stickiness" of an embedded style sheet.

Both the opening and closing style tags as well as each rule is stored as a seperate segment of the same string on its own line, and each contains the newline character.

var style = '<style type="text/css">\n'+
'.reg { font-size: 10pt; color:#000000; font-family:monospace } \n' +
'.bigRed { font-size: 14pt; color:#ff0000; font-family:monospace } \n' +
'</style>'

document.write(style)

**Do not use \n after the closing style tag or else a strange break in the page will occur with some browsers.


>>String Literals and String Variables
>>Nesting Quotes And The Escape Character
>>String Concatenation and String Operators
>>Creating Line Breaks
>>Strings To Numbers: Data Type Conversion
>>Strings and The Write Method

View Source | Home | Contact