How to create string with multiple spaces in JavaScript

Question

By creating a variable

var a = 'something' + '        ' + 'something'

I get this value: 'something something'.

How can I create a string with multiple spaces on it in JavaScript?

Birdlime

use \xa0 code for each ` ` space – Sibling

also can use   in html – Hal

Answer 1

In 2022 - use ES6 Template Literals for this task. If you need IE11 Support - use a transpiler.

let a = `something       something`;

Template Literals are fast, powerful, and produce cleaner code.

---

If you need IE11 support and you don't have transpiler, stay strong 💪 and use \xa0 - it is a NO-BREAK SPACE char.

Reference from UTF-8 encoding table and Unicode characters, you can write as below:

var a = 'something' + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + 'something';

Sibling

Nice! When you add it to an html element jQuery converts \xa0 to   – Hamburger

Thanks. This worked to pad a curved span around a Dance Style being input elsewhere: $('#DanceStyle').text("\xa0\xa0\xa0\xa0" + $('#Dances_Moderated_DanceStyle').val() + "\xa0\xa0\xa0\xa0") – Gamely

Thanks! that's also very helpful when you need an invisible char when you have to provide some value but you actually only add a space. – Chemnitz

Answer 2

in ES6:

let a = 'something' + ' '.repeat(10) + 'something'

old answer:

var a = 'something' + Array(10).fill('\xa0').join('') + 'something'

number inside Array(10) can be changed to needed number of spaces

Cherry

Answer 3

Use  

It is the entity used to represent a non-breaking space. It is essentially a standard space, the primary difference being that a browser should not break (or wrap) a line of text at the point that this   occupies.

var a = 'something' + '&nbsp &nbsp &nbsp &nbsp &nbsp' + 'something'

Non-breaking Space

A common character entity used in HTML is the non-breaking space ( ).

Remember that browsers will always truncate spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the   character entity.

http://www.w3schools.com/html/html_entities.asp

Demo

var a = 'something' + '&nbsp &nbsp &nbsp &nbsp &nbsp' + 'something';

document.body.innerHTML = a;

Felucca

Answer 4

In ES6 you can build strings like this:

const a = `something ${'\xa0'.repeat(10)} something`

Just add any space between ` ` and print variables inside with ${var}

Malapropos

Please provide some text description when answering. – Mansuetude

Answer 5

With template literals, you can use multiple spaces or multi-line strings and string interpolation. Template Literals are a new ES2015 / ES6 feature that allows you to work with strings. The syntax is very simple, just use backticks instead of single or double quotes:

let a = `something                 something`;

and to make multiline strings just press enter to create a new line, with no special characters:

let a = `something 

    
                         something`;

The results are exactly the same as you write in the string.

Epicritic

Answer 6

You can use the <pre> tag with innerHTML. The HTML <pre> element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional ("monospace") font. Whitespace inside this element is displayed as written. If you don't want a different font, simply add pre as a selector in your CSS file and style it as desired.

Ex:

var a = '<pre>something        something</pre>';
document.body.innerHTML = a;

Rind

Answer 7

I don't have this problem with the string variable itself, but only when the string is converted into html.

One can use replace and a regex to translate spaces into protected spaces replace(/ /g, '\xa0').

var a = 'something' + '        ' + 'something'

p1.innerHTML = a
p2.innerHTML = a.replace(/ /g, '\xa0')

<p id="p1"></p>
<p id="p2"></p>

BTW, if you input many spaces into contenteditable, they are translated as alternating sequences of spaces and protected spaces as you can try here:

<p contenteditable onkeyup="result.value = this.innerHTML">put many space into this editable paragraph and see the results in the textarea</p>

<textarea id="result"></textarea>

Koontz