I have a string which is returned by a JAVA API as follows.
String:
var text = "Enjoy True Value Tuesday!\nExclusive Bhangra Class tomorrow at 7am.\nAlso get flat discount Rs.2500\/- on all memberships.\nFirst come First book.Limited 10 ";
When I set the text of the vaadin-text-area to this string it does not show the full text, as shown in the following image.
I also have tried to change the '\n' to
as suggested here. But it did not solve the problem.
Can anyone please let me know what is the problem here?
Thanks
Related
Good day,
I am using Angular 8 as my frontend, and java api service as my backend.
I need to retrieve some String from backend, and the String will having \n in between, for example:
"Instructions:\n1. Key in 122<16 digit \nreload pin># to reload.\n2. Press SEND/CALL from
In my .ts file, I am setting this String value as follow:
this.str = this.apiRes.responseMsg1;
console.log("this.str : " + this.str);
This will give me Instructions:\n1. Key in 122<16 digit \nreload pin># to reload.\n2. Press SEND/CALL, thus when I use it to display in html, it will just display as 1 line.
If I hard code this String to a String variable, for example:
this.str = "Instructions:\n1. Key in 122<16 digit \nreload pin># to reload.\n2. Press SEND/CALL from";
console.log("this.str : " + this.str);
It will give me :
Instructions:
1. Key in 122<16 digit
reload pin># to reload.
2. Press SEND/CALL from
Which is what I want.
I am not really familiar with Angular, I am trying to find this answer in google, but cant get any related result.
May I know why is this happen? And any way I can display the api message accordingly?
HTML ignores \n line breaks. You basically have two options to fix this:
Replace the line breaks with <br> elements.
Add a line of css white-space: pre-wrap; to your HTML element which is displaying your string.
I get my data from an API, which return XML, I already convert it to json because I use angularjs, the field that I need, store Songs Lyrics and it used this symbol ↵ when ever it should go to new line.
for example :
You shout it loud↵But I can’t hear a word you say↵I’m talking loud, not saying much↵↵I’m criticized but all your bullets ricochet↵You shoot me down, but I get up
example above, is something that I get when I use console.log() but when I show this field to my HTML page, its just string with no ↵ in it. I don't know why it not show in HTML, and if its something to make new line, it's not happening.
I was thinking to replace ↵ with <br /> is it possible? I will be appreciate it if you guys can help me with that.
UPDATE :
I use angularjs and fill the model with lyric and show it with {{lyric}} in my html
but as you can see in picture, when I use console.log($scope.lyric) string is formated well, but when I show the same model in HTML, its like this
Simple regexr string replace should take care of it:
var str = 'You shout it loud↵But I can’t hear a word you say↵I’m talking loud, not saying much↵↵I’m criticized but all your bullets ricochet↵You shoot me down, but I get up';
var formatted = str.replace(/↵/ig, "<br/>\n");
console.log(formatted);
document.write(formatted);
The regexr finds everything that matches the character between the / signs and replaces them with a standard newline \n and a HTML breakline tag <br/>.
The i and g flags mean Case Insensitive and Search Global respectively.
Case Insensitive catches the characters even if they are in a different case. Search Global means that if you input a multi line string, then it will replace on all lines and not just on the first.
I just figure it out, I let you know how it works in case of anyone else face with same problem :
when I show lyric like this :
<p>{{lyric}}</p>
it ignored my new lines. but when I use this :
<pre>{{lyrics}}</pre>
it works!
I am using appery.
I want the number in a text input to be sent to a database, which it is. Problem is that I need to add the short text 'Tel:' before the actual number. So the string in the database will sa Tel: XXX(the number).
I have tried now for two days and really can't get it to work even if it seems like an easy task. All it does is that is sends the number. (trying prepend, but obviously doing it wrong)
Any help would be very appreciated!
If you are using Appery try this,
"tel:" + Apperyio(name of your text component in string).val();
You can try this
var number = "tel:" + document.getElementByID("Input_Field_ID").value;
now sent this number (variable) to Database
I am using the below code from the post below to show a JavaScript Confirm message based on data out of the database if the NavigationUrl is a '.com' This works EXCEPT when there are " quotes in the text. Does anyone know how I can parse out the quotes or set the quotes properly so the JavaScript will display quotes in the message?
Here is the code on another post to actuall set up the onclick event on the hyper link etc:
http://forums.asp.net/p/2026622/5833708.aspx?p=True&t=635549629987458698
I've tried the following but when I click the link and it is set to contain a .com nothing happens. If I add text that has NO " quotes it works fine. The length of the text doesn't seem to matter:
C# Code when I am pulling the data from my database table:
public string GetExternalDisclaimerText()
{
string externalDisclaimerText = context.TEST_GLOBAL.Where(tg => tg.ITEM_NM == "DISCLAIMER_TEXT").FirstOrDefault().ITEM_VALUE_TXT ?? "N/A";
Debug.Write("before: ");
Debug.Write(externalDisclaimerText);
externalDisclaimerText = externalDisclaimerText.Replace("\"", "\"");
Debug.Write("after: ");
Debug.Write(externalDisclaimerText);
return externalDisclaimerText ?? "N/A";
}
Here is the text that does not work:
"I am pleased that we have been able to secure Coach Fisher as our head coach for the long term," athletic director Stan Wilcox said in a statement. "The commitment we are making to him is a reflection of the outstanding job he has done in leading our program to its current level of excellence. While we are delighted with the undefeated season this year and our upcoming appearance in the inaugural College Football Playoff, we began working on this new contract before the success of this past season was in full view. It is a great day for Florida State."
2 issues, you should construct your search with like this -
myString = myString.replace(/\"/g, '\"');
adding the "g" at the end will replace all occurrences in the string.
You may also encounter other characters that break your code so you should look for a more robust escape feature.
Here is the answer:
externalDisclaimerText = HttpUtility.JavaScriptStringEncode(externalDisclaimerText);
I have got a little problem.
I get a String back in a JSON response which has control characters(\n) in it.
"ClData":" stream TV and films online. O\u0027Dwyer is accused of being the administrator of the site. \n\nStudent O\u0027Dwyer was arrested on 23 May and spent the night in custody, before his aunt posted bail of £3,000."
Now when I use
console.log(root.CatLong.ClData)
I get formatted text back in the console.
But if i use
content.innerHTML = root.CatLong.ClData
It displays it without the "\n" but completly unformatted.
Is the error on my side or is .innerHTML just not capable of interpreting control characters.
Thanks in advance
Max
As far as the browser is concerned the "\n" is just white space and will get ignored. Try enclosing the text in a pre tag to tell the browser it is pre-formatted.
content.innerHTML = "<pre>" + root.CatLong.ClData + "</pre>";
I have to replace the \n with <br> like this one guy who deleted his answer pointed out
content.innerHTML = root.CatLong.ClData.replace((/\n/g,"<br>");