Line breaks are counted as 2 characters in a contenteditable div [duplicate] - javascript

I'm using regular textbox as a text input where the users wrties their comments. I then use JQuery and JSON to send data to the server and then insert it into the database.
When I want to display this text I use jQuery to download it prepare HTML and display it in the browser, but there are no new lines.
How can I keep any newlines entered by the user so that they are displayed in the browser?
EDIT:
The problem is that when I do alert $('.detailsCommentContent').val() I can see line breaks in the alert window, but when I then pass it as a GET argument:
insertComment.aspx?id=10&content= " + $('.detailsCommentContent').val() "
then in the url there are no signs of newLine :(

Just do like this answer: keep formatting entered in asp.net textbox (carriage return, new line, etc)
theStringYouWantToFormat.Replace(char.ConvertFromUtf32(13),"<br/>")

Before writing out the HTML using javascript to the page, make sure to replace all the newlines with <br /> tags. Here is a simple extension for string that will allow you to do it using javascript (source):
String.prototype.NewlineToBR = function() {
return this.replace( /\r\n|\r|\n/g, br || '');
}
Usage:
var htmlString = newlineString.NewlineToBR();
Then just insert the new string into you HTML.

where do you want to display the text? in a textarea or directly on the page?
if on the page you'll have to convert the newlines to <br/> tags when getting the text from the db and printing it to the page.

I beleive this is down to the encoding you are using. Difference between unicode and ascii or something similar. It's been a while since I worked on something like this but I think it boiled down to two options.
match up the encoding on save and on load (we found that we had ascii on one and unicode on another).
replace all new line character with an arbituary value when saving and swap it back when you load it.

Related

Escaping string using JavaScript before populating form input

I have this code where I grab an attribute value and load it into a form, the headline line can look something like:
Welcome to America's best valued whatever
But when using this escape function, the string is cut off at the apostrophe,
var headline = escape($(this).attr("data-headline"));
//populate the textbox
$(e.currentTarget).find('input[name="headline"]').val(headline);
I've also tried using the solutions here: HtmlSpecialChars equivalent in Javascript? with no luck.
How can I populate my input and keep apostrophe's/quotes?
Just use
$(this).find('input[name="headline"]').val(this.dataset.headline);
No need for any escaping.
However, notice that escape does not cut off apostrophes, it replaces them with %27. If your current code does not work with apostrophes in the headline, make sure that the markup containing the data-headline attribute is properly escaped by whatever tool is creating it.
var headline = $(this).attr("data-headline").replace(/'/g, '%27');
//populate the textbox
$(e.currentTarget).find('input[name="headline"]').val(unescape(headline));
If browser compatibility is important, dataset is only available IE11+ https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset#Browser_compatibility

AngularJS format value in textarea

I want to know if there is any way to solve my problem below without replacing \n by other values:
The user can enter a description for something in a textarea. He is also able to make line-breaks in that textarea.
In my controller there is a description value which contains the input string like This is my \n description with a line break.
This value will be saved into the database after the user submitted it.
My problem is:
if the user wants to edit his description the value in the textarea should be auto-formatted, so it should look like when he entered the description.
First: are there any special tricks to format a textarea where the input comes from angularjs ?
Second: is there any way to keep the \n in the text but display it as a line break?
New lines inside a textarea are new lines in the resulting string (\n).
This fiddle demonstrates such behaviour.
If you want to store \n in the database, there is nothing to do, the string is already of that format.
If by 'linebreak', you mean the <br> tag and you actually meant that the string comes from the DB containing such tags, then you should replace them beforehand I suppose.
Ideally your database should contain newlines (\n), you should save and fetch newlines from it as is, no conversion.
you can also make your custom filter which will replace \n to <br>
// filters js
myApp.filter("nl2br", function($filter) {
return function(data) {
if (!data) return data;
return data.replace(/\n\r?/g, '<br />');
};
});`

Replacing £ character from html textarea using javascript

I'm currently developing a simple web app using html with JavaScript, and I'm trying to do a simple string.replace call on a string received from a html textarea like so;
var contents = document.getElementById("contents").value;
var alteredText = contents.replace(/£/g, "poundsign");
The problem is that when a £ sign is included in the string, the replace call can't find it. I've looked at the code via the console and it seems that anytime there's a $ sign in JavaScript it adds a "Â" to the £ symbol, so
string.replace(/£/g, "poundsign");
as it was written in the js file becomes the following while running:
string.replace(/£/g, "poundsign");
while £ in var contents remains simply £ (putting £ into the textarea causes the replace call to work correctly). Is there a way to stop the  being added in the js file, or to add it to the html file before .replace is called?
The  is added anytime £ appears in the js file as far as I can see, and I haven't been able to get it to match up with the html without the user adding the  to the html themselves.
// replace pound string by empty string
var mystr = '£';
mystr = mystr.replace(/£/g,'poundsign');
alert(mystr);
Thanks to #David Guan for the link, that put me on the right track, and to everyone else that commented.
The issue was resolved when I used the Unicode number in the .replace call rather than the character, it was able to then match the £ sign correctly without the  also being inserted.

Newline problem when writing to HTML using JavaScript

I'm using regular textbox as a text input where the users wrties their comments. I then use JQuery and JSON to send data to the server and then insert it into the database.
When I want to display this text I use jQuery to download it prepare HTML and display it in the browser, but there are no new lines.
How can I keep any newlines entered by the user so that they are displayed in the browser?
EDIT:
The problem is that when I do alert $('.detailsCommentContent').val() I can see line breaks in the alert window, but when I then pass it as a GET argument:
insertComment.aspx?id=10&content= " + $('.detailsCommentContent').val() "
then in the url there are no signs of newLine :(
Just do like this answer: keep formatting entered in asp.net textbox (carriage return, new line, etc)
theStringYouWantToFormat.Replace(char.ConvertFromUtf32(13),"<br/>")
Before writing out the HTML using javascript to the page, make sure to replace all the newlines with <br /> tags. Here is a simple extension for string that will allow you to do it using javascript (source):
String.prototype.NewlineToBR = function() {
return this.replace( /\r\n|\r|\n/g, br || '');
}
Usage:
var htmlString = newlineString.NewlineToBR();
Then just insert the new string into you HTML.
where do you want to display the text? in a textarea or directly on the page?
if on the page you'll have to convert the newlines to <br/> tags when getting the text from the db and printing it to the page.
I beleive this is down to the encoding you are using. Difference between unicode and ascii or something similar. It's been a while since I worked on something like this but I think it boiled down to two options.
match up the encoding on save and on load (we found that we had ascii on one and unicode on another).
replace all new line character with an arbituary value when saving and swap it back when you load it.

html entity decode fail with the new lines in textareas

when I get a text from a textarea in html like this
wase&
;#101;m
the correct decode is waseem
notice the newline , when I decode it I get
wase&;#101;m
the newline make errors here , Can I fix it ? I use javascript in the decoding process .
I use this function in decoding
function html_entity_decode(str) {
var ta=document.createElement("textarea");
ta.innerHTML=str.replace(/</g,"<").replace(/>/g,">");
return ta.value;
}
You could pass it through the following regex - Replace
&[\s\r\n]+;(?=#\d+;)
with
&
globally. Your HTML entity format is simply broken. Apart from the fact that HTML entities cannot contain whitespace and newlines, they cannot contain semi-colons in the middle.
Your input text may not be right and it is working as intended. Garbage-In-Garbage-Out.
I suspect the &\n; should be something else. But if not:
str.replace(/&\s*;/g, "");

Categories