I've inherited some pretty plex code for a web forum, and one of the features I'm trying to implement is the ability for spaces to not be truncated into only one. This is mainly because our users often want to include ASCII art, tables etc in their posts.

I first did this using a simple search and replace in javascript, which had the side effect of breaking HTML tags (eg <a href=....> became <a&nbsp;href=.....>).

I then tried doing this on server side, when the strings are retrieved, by having spaces converted before links and code people insert is converted to HTML. This works to a degree but it causes some issues with other parts of the code, for example where a message is truncated to appear on the home page, it might leave some of the space code, such as

Here is a message&nb

I think there may be a way to just alter the original javascript to achieve this - it just needs to only match spaces that are not inside a HTML tag.

The script I was using originally was message = message.replace(/\s/g, " ").

Thanks for any help you can provide with this.

I've inherited some pretty plex code for a web forum, and one of the features I'm trying to implement is the ability for spaces to not be truncated into only one. This is mainly because our users often want to include ASCII art, tables etc in their posts.

I first did this using a simple search and replace in javascript, which had the side effect of breaking HTML tags (eg <a href=....> became <a&nbsp;href=.....>).

I then tried doing this on server side, when the strings are retrieved, by having spaces converted before links and code people insert is converted to HTML. This works to a degree but it causes some issues with other parts of the code, for example where a message is truncated to appear on the home page, it might leave some of the space code, such as

Here is a message&nb

I think there may be a way to just alter the original javascript to achieve this - it just needs to only match spaces that are not inside a HTML tag.

The script I was using originally was message = message.replace(/\s/g, " ").

Thanks for any help you can provide with this.

• javascript
• html
• regex
• string

• 1 See stackoverflow./questions/5210287/… for a PHP solution, which contains the relevant regex pattern. – Dan Blows Commented Jan 30, 2012 at 9:58

3 Answers 3

You can use the pre element to include preformatted text, which renders spaces as-is. See http://www.w3/TR/html5-author/the-pre-element.html

Those docs specifically say one of the best uses of the pre element is "Displaying ASCII art".

Example: http://jsbin./owuruz/edit#preview

<pre>
         /\_/\
    ____/ o o \
  /~____  =ø= /
 (______)__m_m)
</pre>

In your case, just put your message inside a pre tag.

Yes, but you need to process text content of elements, not all of the HTML document content. Moreover, you need to exclude style and script element content. As you can limit yourself to things inside the body element, you could use a recursive function like following, calling it with process(document.body) to apply it to the entire document (but you probably want to apply it to a specific element only):

function process(element) { 
  var children = element.childNodes; 
  for(var i = 0; i < children.length; i++) { 
    var child = children[i]; 
    if(child.nodeType === 3) { 
      if(child.data) { 
        child.data = child.data.replace(/[ ]/g, "\xa0"); 
      } 
    } else if(child.tagName != "SCRIPT") { 
      process(child); 
    } 
  } 
}

(No reason to use the entity reference   here; you can use the no-break space character U+00A0 itself, referring to it as "\xa0" in JavaScript.)

One way is to use <pre> tags to wrap your users posts so that their ASCII art is preserved. But why not use Markdown (like Stackoverflow does). There's a couple of different ports of Markdown to Javascript:

• Showdown
• WMD
• uedit