I am creating comments from user input and rendering them using Mustache.js after a user clicks 'submit'. I realize I can replace user input line breaks (\n) with <br/> to render as HTML breaks, such as
myString.replace(/\n/g, '<br />');
and I realize I can make Mustache not escape HTML by using triple brackets
{{{myString}}}
However, I would like to escape all user HTML as Mustache would typically do with double braces {{ ... }}, with the exception of allowing line breaks with <br/>
What is the best way to do this? I can replace the line breaks after it has been rendered, but that seems like a very inefficient solution, and I'm thinking there has to be a better way.
Option 1 - Use a pre tag:
It's actually best (or efficient) that you wrap text in a <pre></pre> tag, which will preserve the white space in the text.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
And enable word-wrap
How do I wrap text in a pre tag?
- http://jsfiddle.net/X5ZY7/
Option 2 - Split your string into lines, and use a mustache each:
comment = userComment.split("\n")
{{#comment}}
{{comment}}<br/>
{{/comment}}
Option 3 - Manually escape your string using your favorite method before injecting the tags:
var div = document.createElement("div")
div.textContent = comment
comment = div.innerHTML.replace(/\n/g, "<br/>")
{{{comment}}}
If you're looking to add line breaks to a textarea you need to replace \n with
Related
I am output from a process in python to be displayed on a webpage, however I am unable to format this text properly as <br>, \n and \t is rendered onto the page.
Attempts
Replace \n with <br> or <\br>, then place changed text into <p> tag
Use a <pre> tag with the unformatted text containing \n and \t
encode the text as unicode on the server line = unicode(output.strip())
removing all quotes from within string
Tried using python html module but characters rendered as is line = html.escape(output.strip())
Note
I am using React so I cannot edit the DOM directly, I have to manipulate state.
Example lines
unformated i.e. leaving newlines etc
<pre className='console_text' key={i}>{el}</pre>
or (with replacements) i.e. replace newlines with br tag and tabs with spacing character
<p className='console_text' key={i}>{el}</p>
Note also
I am able to send other text from the server myself which contains newlines and it is formatted properly, I believe it has something to do with either the text formatting or some hidden character(s) that escapes everything but I am unable to find it, I'd appreciate any guidance.
Console output
You need to escape HTML characters, see Escaping HTML
I'm trying to grab an element's HTML using jQuery and then post it to the server. I successfully grabbed it, but I am not able to remove the white space between the tags and the line breaks that are rendered by default. The HTML code grabbed is shown below:
<table><tbody><tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th></tr>
<tr><th>2nd row</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>
I would like to trim the spaces between the tags only. I've used this regular expression: str.replace(/\s+/g, ' ');. But that doesn't seem to work, any suggestions?
Currently, you are replacing all consecutive sequences of whitespace with a single space.
This is what you want:
str.replace(/>\s+</g, '><');
I need to add escape character(backslash - ) character at the end of each line to wrap the string.
I have a <textarea> element. When the user fills it, you can see the spaces they made and when they pressed Enter to jump to the next line.
This is great, but when I see the HTML output, the result differs. It is an endless sentence without line breaks.
Using only HTML or JavaScript, how can I fix this?
You probably want something like:
<p style="white-space: pre-wrap"></p>
<p style="white-space: pre"></p>
<pre></pre>
pre-wrap:
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
pre:
Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML
If you are just taking what is entered in a textarea and outputing it as html, you would see this. For starters, you could replace all spaces with and all newlines with <br>. Or put the output in <pre> tags. (In either case, you will also want to replace some other characters with entities too.)
I have several paragraphs of text that are being stripped of all of their formatting by a javascript function.
I have the function doing 99% of what I need it to do already, with one minor problem.
At the very end of the text it is putting two <br><br> tags that I do not want as it just adds blank white space at the end. In other areas of the text there are double <br> tags I want to leave in place.
So my question is how do I take the entire block of text and only remove the very last <br><br> tags?
How about using regular expressions:
var text = '<br><br> Hello there... <br><br>\n<p>How are you?</p><br><br>';
text = text.replace(/<br><br>$/, '');
the $ checks to make sure you only remove the one at the end of the string.
I have a set of html text boxes that take input and when the user clicks an 'add' button uses javascript to take the text input and format a string that is put in an HTML select box. The first of these boxes is supposed to contain a 2 character number but can also accept a blank. The formatted strings would look like this:
01-ABC-O
02-DEF-I
However I need a way to display the blank numbers that lines up with the other elements
-GHI-O
This type of entry will show up fine when the javascript adds the option, but when the page is reloaded and the select is repopulated with the values (I'm using Java, jsp, and struts 1.1 if that helps) it gets the same values(spaces preserved) but the whitespace is no longer shown in the select control (I've looked at the page source, and it looks identical to when the javascript adds the option). I have tried substituting the spaces for but this just prints the string " " instead of the space. I've also tried using "pre" html blocks and the css white-space property and neither have worked.
Let me know if any further clarification is needed.
You need to replace the spaces with and it should work - note the closing semi-colon (which is missing from your example in the question)! When you do it through Javascript, most (all?) browsers will automatically render the spaces, but when the spaces are there when the page is loaded all (sometimes all but one) of them will be ignored.
You should also apply a font-family: CSS attribute to the select that specifies mono-spaced font(s) in order to ensure everything lines up properly.
When creating the select option with javascript, to preserve white-space, use "\xa0" - it is a NO-BREAK SPACE char.
You can use the pre css style on the area that you are outputting the value to.
<style type="text/css">
#element {
white-space: pre;
}
</style>
<div id="element">
stuff goes here
</div>
This will preserve all whitespace in the div element (other element types will also work) and then you don't need to worry about using the non breaking space.
Are you going to add it via scripting, you need to use Escape Codes for Space "% A0" which you then decode with unescape ()
logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");
logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");
Since unescape is deprecated, you may want to use decodeURI:
logTypeList[i] = new Option(decodeURI(" kent Agent".replace(/ /g, "%C2%A0")), "theValue");
More info at http://www.javascripter.net/faq/mathsymbols.htm
You can use the Unicode Character 'SPACE' (U+0020) instead of ("\u0020")