如何在不破坏HTML标签的情况下转换空格？

Question

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

我首先使用简单的搜索并在javascript中替换，这具有打破HTML标记的副作用（例如， <a href=....>成为<a&nbsp;href=.....> ）。

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

这是一条消息＆nb

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

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

感谢您提供的任何帮助。

Answer 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标签中。

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

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

Answer 3

一种方法是使用<pre>标签来包装用户帖子，以便保留其ASCII艺术。 但是为什么不使用Markdown（就像Stackoverflow那样）。 Markdown到Javascript有几个不同的端口：

• 摊牌
• 大规模杀伤性武器
• uedit