javascript - 将纯文本呈现为 HTML 维护空白——没有 <pre>

Question

给定任何充满可打印字符的任意文本文件，如何将其转换为呈现完全相同的 HTML(具有以下要求)？

• 除了默认的 HTML 空白规则外不依赖任何规则
  • 没有<pre>标签
  • 无 CSS white-space规则
• <p>标签很好，但不是必需的( <br /> 和/或 <div> 很好)

• 空格被准确保留。

  给定以下输入行(忽略错误的自动语法高亮显示):

  Line one
      Line two, indented    four spaces
  

  浏览器应该呈现完全相同的输出，保持第二行的缩进以及“缩进”和“空格”之间的间隙。当然，我实际上并不是在寻找等宽输出，字体与算法/标记正交。

  将这两行作为一个完整的输入文件，示例正确的输出将是:

  Line one<br />&nbsp;&nbsp;&nbsp;&nbsp;Line two, 
  indented&nbsp;&nbsp;&nbsp; four spaces
  

• 浏览器中的软包装是可取的。也就是说，生成的 HTML 不应强制用户滚动，即使输入行比其视口(viewport)宽(假设单个单词仍比所述视口(viewport)窄)。

我正在寻找完全定义的算法。在 python 或 javascript 中实现的奖励积分。

(请不要只回答我应该使用 <pre> 标签或 CSS white-space 规则，因为我的要求使这些选项站不住脚。也请不要发布未经测试和/或幼稚的建议，例如如“用   替换所有空格。”毕竟，我确信解决方案在技术上是可行的——这是一个有趣的问题，你不觉得吗？)

Answer 1

在允许浏览器换行的同时做到这一点的解决方案是用一个空格和一个不间断空格替换两个空格的每个序列。

浏览器将正确呈现所有空格(正常和非换行)，同时仍将长行换行(由于正常空格)。

Javascript:

text = html_escape(text); // dummy function
text = text.replace(/\t/g, '    ')
           .replace(/  /g, '  ')
           .replace(/  /g, '  ') // second pass
                                      // handles odd number of spaces, where we 
                                      // end up with " " + " " + " "
           .replace(/\r\n|\n|\r/g, '<br />');