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.
Related
I have a narrow button that contains an image and label text. The state of the button changes to one of several values which are stored as text in an array and then changed out with textContent.
One of the values forces a line break in the label text. I would like to reserve the "blank line" below my label so that layout isn't affected every time the label breaks to two lines of text. To accomplish this, I'm trying to append a newline to every single-line value. For layout reasons, I can't simply pad the container — I need it to match the height of a line of formatted text.
Is there any way to put a newline into a text array value? I've tried adding a CR to my text both within the array and prior to the array as a variable using:
Labelname + \n
Labelname\n
Labelname<br /> (HTML, I know)
var label = 'Labelname' + String.fromCharCode(13)
Nothing seems to make the newline "stick," and the console reveals the value "Labelname" without the newline.
HTML generally ignores whitespace (including newline characters). To have it rendered, you need to use an element that doesn't ignore whitespace (like <pre>), or opt in to <pre>-style whitespace handling via CSS with white-space: pre-wrap.
I ended up using innerHTML to put formatted text into the element. I was resistant to using it for various reasons, but it provided a straightforward solution to this problem.
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
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 the following code:
<body>
<form>
<textarea id="textfield"></textarea>
<input type="button" onclick="func1()" value="Post">
</form>
<p id="para"></p>
</body>
When I type in textarea all the special tags <a>,<br> etc are ignored when I display them inside a <p> also all what I typed is displayed on one line and it doesn't even matter that I pressed return or use <br>, textarea seems to be taking html tags and turn them into a simple text.
This is the function I use to display the text area in html:
function func1()
{
document.getElementById("para").innerHTML=document.getElementById("textfield").innerHTML;
}
How do I take text from textarea and display it on screen normally(not in one line).
How do I modify textarea for a user who doesn't know how to use tags? when pressing a simple return should be translated to <br
First of all, for textareas you should use value and not innerHTML. Like this...
document.getElementById("para").innerHTML=document.getElementById("textfield").value;
Now, for the single line issue. In textarea, new lines are separated by \n. In your divs \n do not work. So you'll have to replace them with <br> tags. So rewriting your code snippet...
document.getElementById("para").innerHTML=document.getElementById("textfield").value.replace(/\r\n|\r|\n/g,"<br />");
The text in the textarea isn't html. It is just text, containing regular line break "\n". To display them, you either need to enclose the text in a pre tag, or replace the "\n" with <br>.
I would do the latter, since pre doesn't break at all if there's no break in the text, so you'll have a single long line and a scrollbar.
<textarea> does not take HTML and interprets it. I think what you are looking for is a Rich Text Editors if you want your users to be able to modify text without knowing the tag names
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.)