Question

I am trying to replace all series of ” ” chars with “< pre> < /pre>” using a regular expression in Javascript.

So I want to change the 1st line below to the second:

<p>There   should    be    gaps    of    4    chars    tween    each    word</p>
<p>There<pre>   </pre>should<pre>    </pre>be<pre>    </pre>gaps<pre>    </pre>of<pre>    </pre>4<pre>    </pre>chars<pre>    </pre>tween<pre>    </pre>each<pre>    </pre>word</p>

// Or if I cannot place <pre>'s inside a <p> element then replace them with 
// transparent "_" chars
<p>There<font style="color: transparent">____</font>should...</p>

The reason I am doing this is because I am trying to preserve/display space chars and if I place the whole paragraph inside a pre element then word wrapping gets disabled.

Can you help me get my regular expression to place a pre start and end tag at the ends of each group of ” ” chars?

var p = document.getElementById("myP");
var con = p.innerHTML;
con = con.replace(new RegExp("[ ]{2,}"), "<pre> ");
con = con.replace(new RegExp("[ ]{2,}"), " </pre>");
p.innerHTML = con;

// This is incorrect because it removes all the space chars and only leaves one there
// Test    string
// Test<pre> </pre>string // there should be 4 space chars here

Answer 1

con = con.replace(/(?:\s| )+/g, '    ');

This has the advantage of matching any number of spaces (yours and appclay’s only matches 2 or more spaces), ensuring exactly 4 spaces (ruakh’s does not enforce the number of spaces), doesn’t mix <pre> and <p>. The disadvantage of all of these is that they are unsafe with HTML attributes in the innerHTML, which may or may not be an issue for you. To solve that would require a parser or a DOM-based solution; if that’s a concern, let me know in a comment and I could explain how to do it more safely in the DOM.

Edit: I’ve now accounted for other forms of whitespace (e.g. \t or \n) and existing   (non-breaking-spaces).

Edit again, just noticed this:

The reason I am doing this is because I am trying to preserve/display space chars and if I place the whole paragraph inside a pre element then word wrapping gets disabled.

If you don’t need to support IE7 and below, you can add this style to the paragraph or its parent: white-space: pre-wrap. Then you could skip all of this text processing.