Enter Character should print a new line in html - javascript

I am getting "First Line.↵Second Line↵" as a string in an api response.I want to take this and print in html web page like <span>{{apiText}}</span>. where apiText is a javascript variable whose value is "First Line.↵Second Line↵". But the text appears on one line only.How to I convert ↵ to a format where it prints a break.

That cr character is \n.
You can replace those with <br> tag.
refinedText: Ember.computed('apiText', function(){
return this.get('apiText').replace('\n', '<br>');
})
and in template :
{{{refinedText}}

When you are appending the variable to the span . Append it as innerHTML instead of innerText
If you are using Ember.js try using 3 curly braces: <span>{{{apiText}}}</span>

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.

HTML Title tooltip gets cut off after spaces

I'm trying to get some specific title text to display via JavaScript, but I'm having some issues getting the entire string to show up.
The text I'm trying to display:
mechanical : Failed to copy
And here's what shows up in HTML:
`<td title="mechanical" :="" failed="" to="" copy="">mechanical : Failed to copy</td>`
The actual title displayed afterwards is just mechanical.
In Javascript:
var copyResult = json_obj[i].CopyResult; //variable that contains the text
copyResult = copyResult.replace(/["{}]/g, " "); //regex that removes some characters and replaces them with spaces
The copyResult variable is then added to the element I want.
It looks like having spaces "ends" the title attribute, so the browser tries to make more attributes with the remaining text.
What's the best way to fix this?
I was able to create a workaround. Since any space would end the title attribute, I simply used a regex to properly escape all of the space characters for the copyResult variable.
var copyResult = copyResult.replace(/[ ]/g,"\u00a0")
\u00a0 is the Unicode character for NO-BREAK-SPACE.
it's not the spaces ending the atribute, its the quotation marks... try escaping them with backslashes like \"

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

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);

Javascript replace matched group

I'm trying to build a text formatter that will add p and br tags to text based on line breaks. I currently have this:
s.replace(/\n\n/g, "\n</p><p>\n");
Which works wonderfully for creating paragraph ends and beginnings. However, trying to find instances isn't working so well. Attempting to do a matched group replacement isn't working, as it ignores the parenthesis and replaces the entire regex match:
s.replace(/\w(\n)\w/g, "<br />\n");
I've tried removing the g option (still replaced entire match, but only on first match). Is there another way to do this?
Thanks!
You can capture the parts you don't want to replace and include them in the replacement string with $ followed by the group number:
s.replace(/(\w)\n(\w)/g, "$1<br />\n$2");
See this section in the MDN docs for more info on referring to parts of the input string in your replacement string.
Catch the surrounding characters also:
s.replace(/(\w)(\n\w)/g, "$1<br />$2");

Categories