Pattern for displaying text on a web page that originated from a </a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2014-08-30T20:42:07.877" class="fromnow">Aug 30 '14 at 20:42</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2014-08-31T04:57:30.417" datetime="2014-08-31T04:57:30.417">Aug 31 '14 at 04:57</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 146 times"> <span class="fc-light mr2">Viewed</span> 146 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="25586580" data-ownerid="84131" data-score="3"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="25586580"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><h2>Problem</h2> <p>What is a simple and effective pattern for displaying text on a web page that originated from a <code><textarea></code> element while preserving for orginal formatting?</p> <h2>Goal</h2> <p>The goal is to allow the client to type whatever the feel like into a <code><textarea></code> and for them to be able to view it later with all the characters and line breaks that they used preserved.</p> <p>Anything using Javascript, Jquery, or Backbone would be great.</p> <h2>More info</h2> <p>The three (flawed) methods that I've tried to far: </p> <ul> <li>Displaying the text using <code>jQuery('element').html()</code> <ul> <li>The problem with this method is that html-relevant characters that the client may have chosen to type into the textarea are interpreted as html, such as <code>></code> and <code><</code> </li> </ul></li> <li>Displaying the text using <code>jQuery('element').text()</code> <ul> <li>The problem with this method is that all of the line breaks that the client chose to use are discarded.</li> </ul></li> <li>Displaying the text in a read-only <code><textarea></code> element. <ul> <li>The problem with this method is that its difficult to get the <code><textarea></code> to expand to the exact size of the text. It also leaves a little to be desired in terms for attractive formatting. </li> </ul></li> </ul></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2014-08-30T21:00:46.650" class="relativetime">Aug 30 '14 at 21:00</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Chris Dutrow</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Aug 30 '14 at 20:42">asked Aug 30 '14 at 20:42</time> <a href="../../users/84131/chris-dutrow" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/84131.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Chris Dutrow" /> </a> <div class="s-user-card--info"> <a href="../../users/84131/chris-dutrow" class="s-user-card--link">Chris Dutrow</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">48,402</li> <li class="s-award-bling s-award-blinggold" title="65 gold badges">65</li> <li class="s-award-bling s-award-blingsilver" title="188 silver badges">188</li> <li class="s-award-bling s-award-blingbronze" title="258 bronze badges">258</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-25586580" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="25586580" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-39963982" class="comment js-comment " data-comment-id="39963982" data-comment-owner-id="1959948" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment39963982_25586580"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">so you want to convert line breaks into `<br/>` and special characters to UTF-8, is that correct?</span> – <a href="../../users/1959948/dalorzo" title="19,834 reputation" class="comment-user ">Dalorzo</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25586580/pattern-for-displaying-text-on-a-web-page-that-originated-from-a-textarea#comment39963982_25586580"><span title="2014-08-30T20:44:17.357 License: CC BY-SA 3.0" class="relativetime-clean">Aug 30 '14 at 20:44</span></a></span> </div> </div> </li> <li id="comment-39963990" class="comment js-comment " data-comment-id="39963990" data-comment-owner-id="84131" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment39963990_25586580"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">That would be one approach. I'm not really sure that the best pattern for handling this situation would be though.</span> – <a href="../../users/84131/chris-dutrow" title="48,402 reputation" class="comment-user owner">Chris Dutrow</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25586580/pattern-for-displaying-text-on-a-web-page-that-originated-from-a-textarea#comment39963990_25586580"><span title="2014-08-30T20:45:14.627 License: CC BY-SA 3.0" class="relativetime-clean">Aug 30 '14 at 20:45</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="25586799"></a> <div id="answer-25586799" class="answer " data-answerid="25586799" data-ownerid="588079" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="25586799"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><pre><code>str.replace(/\x26/g,'\x26amp;') // first do all & to & .replace(/\x3c/g,'\x26lt;') // next do < to < .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). </code></pre> <ul> <li>Note: the order of replacements is important. </li> <li>Also note: this sequence did <em>NOT end</em> with an attempt to preserve whitespace (aka, avoid the white-space collapsing feature of HTML) by finding a '<a href="../../questions/24468873/html-equivalent-to-that-does-break">HTML equivalent to   …that DOES break;</a>' (and replace spaces with that) <em>because</em> <strong>it is much simpler</strong> to use a <code>pre</code> tag to hold the contents (seems better for older browsers, notably IE<9) <em>or</em> disable the white-space collapsing feature in CSS: <code>div.preview {white-space: [pre|pre-wrap];}</code></li> </ul> <p>Simple example (<a class="external-link" href="http://jsfiddle.net/njcj6dL4/" rel="nofollow noreferrer">live jsFiddle here</a>):</p> <pre><code><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> </code></pre> <p>Note, you might also want to hook <code>onchange</code> etc.. also, you might want to have a separate function and cache the output (and input) element(s).</p> <p>You could make this a lot more difficult, for example only replace the <code>&</code> when absolutely needed, the same goes for <code><</code>.<br/> Also you could transform all unwanted (non-'ASCII') characters to their unicode HTML-entity equivalent, but all this seems a little overkill for a simple preview as you probably want don't want to submit the user's data in this (overly effective) html-markup. A simple example for that would have been: </p> <pre><code>.replace(/[^\u0020-\u007e]/g, function(m){return '\x26#'+m.charCodeAt(0)+';';}) </code></pre> <p>Hope this gets you started.</p> <p><br/><strong>EDIT 1:</strong> Also have a look at <a class="external-link" href="http://jsfiddle.net/njcj6dL4/2/" rel="nofollow noreferrer">demo jsFiddle v2</a> and <a class="external-link" href="http://jsfiddle.net/njcj6dL4/3/" rel="nofollow noreferrer">demo jsFiddle v3</a> for some more advanced examples like:</p> <pre><code>( // 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>	<this is a tab char & these ☺ë 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> */ </code></pre> <p><br/><strong>EDIT 2:</strong> almost forgot, you could look at the (quirky, forgotten but still valid) <a href="../../a/16784925#16784925"><code>xmp</code>-tag</a>. That would work until the user types <code></xmp</code>. Note for older IE: replace the whole xmp-element instead of setting/overwriting it's <code>innerHTML</code> (because that doesn't work at least in IE6). However, as noted, there are a lot of quirks to this <code>xmp</code>-tag regarding box-layout, overflow etc over the different browsers!</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '17 at 10:25">edited May 23 '17 at 10:25</time> <a href="../../users/-1/community" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Aug 30 '14 at 21:11">answered Aug 30 '14 at 21:11</time> <a href="../../users/588079/gitaarlab" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/588079.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="GitaarLAB" /> </a> <div class="s-user-card--info"> <a href="../../users/588079/gitaarlab" class="s-user-card--link">GitaarLAB</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">14,536</li> <li class="s-award-bling s-award-blinggold" title="11 gold badges">11</li> <li class="s-award-bling s-award-blingsilver" title="60 silver badges">60</li> <li class="s-award-bling s-award-bling__bronze" title="80 bronze badges">80</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>