用于在网页上显示源自<text区域>

Pattern for displaying text on a web page that originated from a <textarea>

本文关键字：lt 区域 gt text 网页 显示 用于      更新时间：2023-09-26

问题

在保留原始格式的同时，在源自<textarea>元素的网页上显示文本的简单有效模式是什么？

目标

目标是允许客户端在<textarea>中键入任何感觉，并使他们能够在以后查看它，同时保留他们使用的所有字符和换行符。

任何使用Javascript、Jquery或Backbone的东西都会很棒。

更多信息

到目前为止，我尝试过的三种（有缺陷的）方法：

  • 使用jQuery('element').html()显示文本
    • 这种方法的问题是，客户端可能选择在文本区域中键入的html相关字符被解释为html，例如>和<
  • 使用jQuery('element').text()显示文本
    • 此方法的问题在于，客户端选择使用的所有换行符都将被丢弃
  • 显示只读<textarea>元素中的文本。
    • 这种方法的问题是很难使<textarea>扩展到文本的确切大小。在吸引人的格式方面，它也留下了一些不足之处
str.replace(/'x26/g,''x26amp;')     // first do all & to &amp;
   .replace(/'x3c/g,''x26lt;')      // next do < to &lt;
   .replace(/'r'n|'n/g,''x3cbr>');  // finally replace new lines with <br>
// Note: I chose hex char code to exclude the 'risky' characters from the code,
//  that way they are also safe for inline-scripts (in older browsers).
// Also, I used local setting char-notation, not unicode, 
//  as they are the same for this purpose (and it saves some chars).
  • 注意：更换顺序很重要
  • 另请注意：这个序列并没有结束，试图通过找到一个"相当于&nbsp…它确实坏了；"（并将空格替换为）因为使用pre标记来保存内容要简单得多（对于较旧的浏览器，尤其是IE<9）或禁用CSS:div.preview {white-space: [pre|pre-wrap];}中的空白折叠功能

简单的例子（在这里直播jsFiddle）：

<textarea style="width:98%" onkeyup="
this.nextSibling.innerHTML=this.value.replace(/'x26/g,''x26amp;')
                                     .replace(/'x3c/g,''x26lt;')
                                     .replace(/'r'n|'n/g,''x3cbr>');
"></textarea><pre></pre>

注意，您可能还希望挂接onchange等。此外，您可能希望有一个单独的函数并缓存输出（和输入）元素。

你可以让这变得更加困难，例如，只在绝对需要的时候更换&，<也是如此
此外，您还可以将所有不需要的（非'ASCII'）字符转换为其等效的unicode HTML实体，但对于简单的预览来说，所有这些似乎都有点过头了，因为您可能不想在这个（过于有效的）HTML标记中提交用户的数据。一个简单的例子是：

.replace(/[^'u0020-'u007e]/g, function(m){return ''x26#'+m.charCodeAt(0)+';';})

希望这能让你开始。


编辑1:还可以看看演示jsFiddle v2和演示jsFiidle v3，了解一些更高级的示例，如：

(  // START HTML encoder hookup 
 function(enc, e1, e2, e3){
   (e1.onkeyup = function(){
      e3.innerHTML = e2.value = enc(e1.value);
   })();
 }( // IIFE Passing encoder and elements
   (function(){  //HTML enc
      var  amp=/'x26/g  ,  lte=/'x3c/g  ,  eol=/'r'n|'n/g
      , noASCI=/[^'u0020-'u007e]/g
      , toUCPd=function(m){ return ''x26#'+ m.charCodeAt(0) +';'; }
      ;
      return function(s){return( 
        s.replace(amp, ''x26amp;')
         .replace(lte, ''x26lt;')
         .replace(eol, ''x3cbr>')
         .replace(noASCI, toUCPd)      //optional
      );};
    }
   )() //IIFE returns HTML enc
 , document.getElementsByTagName('textarea')[0]
 , document.getElementsByTagName('textarea')[1]
 , document.getElementsByTagName('pre')[0]
 )
); // END HTML encoder hookup
/* Corresponding demo html:
Input:<br>
<textarea>&#9;&lt;this is a tab char  &  these &#9786;&#235; non-'ASCII'
continue to to type here</textarea><br>
Generated HTML code:<br>
<textarea>code output</textarea><br>
HTML output in pre:<br>
<pre>html output</pre>
*/


编辑2:几乎忘记了，您可以查看（古怪、忘记但仍然有效）xmp标记。这将一直工作到用户键入</xmp为止。对于旧IE，请注意：替换整个xmp元素，而不是设置/覆盖它的innerHTML（因为这至少在IE6中不起作用）。然而，如前所述，这个xmp标签在不同的浏览器上有很多关于框布局、溢出等的怪癖！

相关文章：