AngularJS format value in textarea - javascript

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 />');
};
});`

Related

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

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.

JQuery and Html ignore quotes

i'm programming in JS and html and having problem with displaying to the users strings which contains double quotes.
I have strings, which can be edited by the users by adding free text.
I need to allow my uses to enter strings like = Hello "some text" bye.
later this edited by user block of text is being saved to my DB.
After a quick check i found out that the string is being saved correctly.
later on i have to display to the users these block of text.
When i'm sending this list back (to client side) my object are correct, aka, containing all of the edited string (for example - Some text "other text").
Later i'm trying to display this text in html by pushing each line to the html:
htmlID.push('<input type=text value="'+MyString+'">')
but unfortunately i'm getting only the part of the string which is not inside the quotes, aka, Some text and "other text" is being skipped by html because of the quotes.( All the text inside the quotes in skipped and the quotes themselves as well. )
I think what i have to do is run over each string, check indexOf quotes and if so, replace them by other value like """ or """ but unfortunately i couldn't get any results.
i would be glad for some help,
thank you
You need to replace all instances of " within the string with its HTML entity: ":
var MyString = 'Hello "some text" bye'.replace(/"/g, '"');
$('#container').append('<input type="text" value="' + MyString + '">');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
If you create a DOM element like below you wont have any problems with quotes.
var input = document.createElement('input');
input.setAttribute('type','text');
input.setAttribute('value',MyString);
htmlID.push(input.outerHTML);

Text Input Character Limits

I'm pulling a string back from the database via jQuery, into a textarea, then upon user approval, grabbing that value and placing it in a text input.
Right now, my code looks roughly like this (some omitted of course):
var string = $('#textarea').val(); // Contains 145,095 char string
console.log(string.length); // logs 145,095 characters
// Clear Input and add approved string
$('#input').val('').val(string); // Contains 14,023 char string
Wondering where those ~131,000 characters are going? Based on some initial research, my understanding is that Chrome (in this case) should support millions of characters in a text input, so is this a jQuery limitation? I haven't found anything to support that hunch. Suggested work arounds?
You don't need to clear the input and then add the new value in, the JS can be streamlined to this:
$('#input').val(string); // Contains 14,023 char string
To be sure the value is being truncated, can you try and do a truthy match like so:
if (string === $('#input').val()) {
console.log('the values match');
}
If it does return true then it is just a visual thing, the content of the input box is intact :-) If not, then I would suggest adding a maxlength attribute to the input.
Hope this helps!
probably it is jQuery limitation
try to put Your text by parts or
try to use clear js : document.getElementById('input').value = string;

JavaScript replace() one html entity with another

I want to get some textarea text and replace all bullet point html entities • with ·.
The usual approach str.replace(/•/g,"·"); doesn't work.
Any advice would be appreciated.
When you're getting the text value back from the textarea, it has already been converted to its actual character. To do a string replacement on that string, either
convert all characters to their html entity counterparts, then proceed with what you're doing or
use the character in the regex directly.
Here's an example of the second approach.
var newText = oldText.replace(/•/g, "");
You can fiddle with an example here.
If you want to go with the first approach, see this question and its answers for ways to convert characters in a piece of text to their corresponding html entities.
If you want to do this without jQuery:
var myTextarea = document.getElementById('id_of_your_textarea');
myTextarea.value = myTextarea.value.replace(/•/g, '·');
jQuery:
$("#myTextarea").val( $("#myTextarea").val().replace(/•/g, '·') );
.val() will get the value from an input element, .val('str') will set a value.

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.

Categories