渲染明文为HTML保持空白 - 无＆LT; pre＆GT; [英] Rendering Plaintext as HTML maintaining whitespace – without <pre>

问题描述

由于任意文本文件充满了可打印字符，这可怎么转换为HTML，将呈现完全一样（以下规定）？

Given any arbitrary text file full of printable characters, how can this be converted to HTML that would be rendered exactly the same (with the following requirements)?

• 在不依赖于任何但是默认的HTML空白规则
  • 否＆LT; pre＆GT; 标记
  • 无CSS 空格规则
  • Does not rely on any but the default HTML whitespace rules
    • No <pre> tag
    • No CSS white-space rules

    空白精确地保持。

    由于输入以下行（忽略错误的自动语法高亮显示）：

    Given the following lines of input (ignore erroneous auto syntax highlighting):

    Line one
        Line two, indented    four spaces
    

    一个浏览器应该呈现的输出完全一样，保持第二行的缩进和缩进和空间之间的差距。当然，我不是真正在寻找等宽​​输出，并且字体是正交的算法/标记。

    A browser should render the output exactly the same, maintaining the indentation of the second line and the gap between "indented" and "spaces". Of course, I am not actually looking for monospaced output, and the font is orthogonal to the algorithm/markup.

    鉴于两行作为一个完整的输入文件，例如正确的输出是：

    Given the two lines as a complete input file, example correct output would be:

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

  • 在浏览器中软包装纸是可取的。即，将所得的HTML不应该强迫用户滚动，即使当输入线比其更宽视口（假设各个字仍缩小比所述视口）。

  • Soft wrapping in the browser is desirable. That is, the resulting HTML should not force the user to scroll, even when input lines are wider than their viewport (assuming individual words are still narrowing than said viewport).

    我在寻找完全定义的算法。积分为实施蟒蛇或的javascript

    I’m looking for fully defined algorithm. Bonus points for implementation in python or javascript.

    （请不要只回答说我应该使用＆LT; pre＆GT; 标签或CSS 空白规则，因为我的要求使得这些选项站不住脚也请不要发布未经检验和/或天真的建议，如与＆放替换所有空格; NBSP; 毕竟，我敢肯定的解决方案在技术上是可能的 - 这是一个有趣的问题，你不觉得）的

    (Please do not just answer that I should be using <pre> tags or a CSS white-space rule, as my requirements render those options untenable. Please also don’t post untested and/or naïve suggestions such as "replace all spaces with  ." After all, I’m positive a solution is technically possible — it’s an interesting problem, don’t you think?)

    推荐答案

    解决的办法做到这一点，同时还允许浏览器为回绕长行是替换两个空格的每个序列的空间和非休息空间。

    The solution to do that while still allowing the browser to wrap long lines is to replace each sequence of two spaces with a space and a non break space.

    浏览器将正确地呈现所有的空格（正常，非破的），同时还包皮过长的线路（由于正常的空格）。

    The browser will correctly render all spaces (normal and non break ones), while still wrapping long lines (due to normal spaces).

    JavaScript的：

    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 />');
    

    这篇关于渲染明文为HTML保持空白 - 无＆LT; pre＆GT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！