javascript - How can spaces be converted to &nbsp without breaking HTML tags? - Stack Overflow

admin管理员组

文章数量:1391975

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

Share Improve this question Follow asked Jan 30, 2012 at 9:55 shaunebashauneba 2,17222 gold badges2323 silver badges3232 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

本文标签： javascriptHow can spaces be converted to ampnbsp without breaking HTML tagsStack Overflow