如何在不破坏 HTML 标签的情况下将空格转换为 &nbsp？答案

【问题标题】：How can spaces be converted to &nbsp without breaking HTML tags?如何在不破坏 HTML 标签的情况下将空格转换为 &nbsp？
【发布时间】：2012-01-30 09:55:08
【问题描述】：

我为一个网络论坛继承了一些相当复杂的代码，我正在尝试实现的功能之一是能够不将空格截断为一个。这主要是因为我们的用户经常希望在他们的帖子中包含 ASCII 艺术、表格等。

我首先使用 javascript 中的简单搜索和替换来执行此操作，这具有破坏 HTML 标签的副作用（例如，<a href=....> 变成了<a&nbsp;href=.....>）。

然后我尝试在服务器端执行此操作，当检索字符串时，在链接和人们插入的代码转换为 HTML 之前转换空格。这在一定程度上可行，但它会导致代码的其他部分出现一些问题，例如，一条消息被截断以显示在主页上，它可能会留下一些空格代码，例如

这是一条消息&nb

我认为可能有一种方法可以改变原始 javascript 来实现这一点 - 它只需要匹配不在 HTML 标记内的空格。

我最初使用的脚本是message = message.replace(/\s/g, "&nbsp;")。

感谢您为此提供的任何帮助。

【问题讨论】：

查看 stackoverflow.com/questions/5210287/… 获取 PHP 解决方案，其中包含相关的正则表达式模式。

标签： javascript html regex string

【解决方案1】：

您可以使用pre 元素来包含预格式化的文本，从而按原样呈现空格。见http://www.w3.org/TR/html5-author/the-pre-element.html

那些文档明确指出 pre 元素的最佳用途之一是“显示 ASCII 艺术”。

示例：http://jsbin.com/owuruz/edit#preview

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

在您的情况下，只需将您的 message 放在 pre 标记内即可。

【讨论】：

+1 获得好的答案和可爱的小猫！ ;-) 但是，是的，使用前置标签而不是弄乱空格。
我不得不承认这只小猫不是我的。它属于公共领域，但作者是其他人。这是我得到它的地方：chris.com/ascii/index.php?art=animals/cats
非常感谢 - 不知道 pre 标签我觉得很傻！我通过将消息正文设置为具有“white-space:pre”CSS 属性来稍有不同，但它具有相同的效果。比乱用正则表达式容易得多！
pre 元素以及它的 CSS 对应元素具有多种效果，包括对空格的特殊处理（这与将空格更改为不间断的效果部分相似但不相同空格）。特别是，它规定在显示中出现的换行符与在 HTML 源代码中完全相同。因此，虽然pre 很可能是许多问题的好答案（可能包括在这种情况下应该被问到的问题），但它并没有解决将空格更改为不间断空格的问题.

【解决方案2】：

是的，但是您需要处理元素的文本内容，而不是所有 HTML 文档内容。此外，您需要排除style 和script 元素内容。由于您可以将自己限制在 body 元素内的内容，您可以使用如下递归函数，使用 process(document.body) 调用它以将其应用于整个文档（但您可能只想将其应用于特定元素）：

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); 
    } 
  } 
}

（这里没有理由使用实体引用&nbsp;；您可以使用不间断空格字符U+00A0本身，在JavaScript中将其称为"\xa0"。）

【讨论】：

【解决方案3】：

一种方法是使用

 标签来包装您的用户帖子，以便保留他们的 ASCII 艺术作品。但是为什么不使用 Markdown（就像 Stackoverflow 一样）。有几个不同的 Markdown 端口到 Javascript：

【讨论】：