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

我已经为网络论坛继承了一些相当复杂的代码，我试图实现的一个功能是空间不能被截断为一个。这主要是因为我们的用户经常希望在他们的帖子中包含ASCII艺术，表格等。如何在不破坏HTML标签的情况下将空格转换为＆nbsp？

我第一次使用简单的搜索和替换在JavaScript中，这有副作用破坏HTML标记（例如<a href=....>成为<a href=.....>）。

然后，我尝试在服务器端执行此操作，通过在链接和代码插入之前将空格转换为HTML来检索字符串。这种效果是有限的，但它会导致与代码的其他部分的一些问题，例如，当一个消息被截断出现在主页上，它可能会留下一些空间代码，如

这里消息& NB

我认为有可能是一个办法只有改变原来的javascript来实现这一点 - 它只是需要只匹配不属于HTML标签内的空间。

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

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

来源

2012-01-30 surfitscrollit

见http://stackoverflow.com/questions/5210287/how-replace-all-空格-html-elements-with-nbsp-using-preg-replace用于包含相关正则表达式模式的PHP解决方案。 – 2012-01-30 09:58:08

您可以使用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标签。

来源

2012-01-30 09:59:23

+1好的答案和可爱的小猫咪！ ;-)但是，使用pre标签而不是搞乱空白。 – Chris 2012-01-30 10:02:04

我不得不承认小猫不是我的。它属于公共领域，但作者是其他人。这里是我得到它的地方：http://www.chris.com/ascii/index.php?art=animals/cats – 2012-01-30 10:03:13

非常感谢 - 因为不知道预标签，我感到非常愚蠢！我通过设置消息的主体具有'white-space：pre'CSS属性稍微不同，但它具有相同的效果。比用正则表达式搞乱更容易！ – surfitscrollit 2012-01-30 10:16:17

是的，但是您需要处理元素的文本内容，而不是所有的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本身，在JavaScript将其称为"\xa0"）

来源

2012-01-30 10:13:37

一种方法是使用<预>标签来包装您的用户帖子，以便保留它们的ASCII艺术。但为什么不使用Markdown（就像Stackoverflow那样）。有一对夫妇降价不同的端口为Javascript：

来源

2012-01-30 10:14:14 graza

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

回答

相关问题