New line character not being printed when setting innerHTML - javascript

I have a django template in which my javascript function has the following lines,
resDiv = document.getElementById("res");
console.log(result.des);
resDiv.innerHTML+=('<h3 style="padding-bottom:50px;"><strong>Desciption: </strong><br><br><i style="color:#0B45A4;">'+result.des+'</i></h3>');
When console.log is executed, it is printed along with new lines in result.des.
But when I concatenate it and try try to fill the innerHTML of resDiv the new lines are not being printed.
All new lines are removed and is filled.
How can I make sure that the new lines are printed in resDiv?

Try something like this, and be sure that resDiv is your real target
resDiv.innerHTML = resDiv.innerHTML.concat('<h3 style="padding-bottom:50px;"><strong>Desciption: </strong><br><br><i style="color:#0B45A4;">'+result.des+'</i></h3>');

from your question it is not totally clear, what you mean, but I guess that you just need to replace the newlines in result.des (e.g. \n, \r) with html newlines <br>

When you concatenate your result.des, make sure you put <br> tag between lines.
https://www.w3schools.com/tags/tag_br.asp
If result.des is a javascript array, you can do result.des.join('<br>');

Related

nodeJS for each new line in a variable, add a hyphen?

I have a single string variable that when logged to console looks like the following with line breaks:
index
project.json
extras
I would like to be able to print it like:
-index
-project.json
-extras
what would be a good way to start on this? I am still in the process of learning JS, so I really have nothing to show for what I've tried, sorry.
I have tried some of the methods(console.log('-' + files_var)), but this does:
that does this:
- index
project.json
extras
You can replace all the line breaks with a line break and a - using .replace() passing a regex /...regex.../ and giving it a global so it replaces all instances. Remember the first string would not have a line break so we will need to add it manually.
console.log("-" + files_var.replace(/\n\r/g, '\n\r -'))
DEMO

remove new line break from top and replace with remaining text

[text area control contains new line break so i should remove that new line break from top and replace with remaining string like image two][1]
This images shows
You could trim it:
$('textarea').val(function(_, val){
return val.trim();
});
But better would be to avoid it server side, before rendering it on client.
Please use jQuery trim() function to remove line breaks. Below code may be help you.
var obj=$("#textareaID");
obj.val(obj.val().trim())
http://live.datatables.net/hucuwemi/1/watch

JSP+HTML with newlines - Get it as string, and remove "new lines"

I am currenly making a little HTML overlay, using IntelliJ IDEA, which i want to be handled by the client (because of varnish cache).
So what i would like to do is the following, and its working (nearly):
Get the template code (html, jsp, el) into a variable, is fairly simple:
<c:set var="overlayHtml"><c:import url="/directory/myOverlay.jsp" /></c:set>
Then i insert it into a javascript like so, and append it:
var advertisementHtml = '${overlayHtml}';
$("body").append(advertisementHtml);
My problem is that my HTML string from the jsp is comming out with "new lines" in it. Like so:
<div id="overlay">
<div>HERE IS MY OVERLAY</div>
<div>Another div</div>
</div>
And this, the javascript cannot handle, and therefor doesnt fire. I would like to be able to remove these new lines, so that the HTML comes out in one line, like so:
<div id="overlay"><div>HERE IS MY OVERLAY</div><div>Another div</div></div>
The problem lies in the JSP, and i need to remove the "new lines" before i inject the variable into the javascript.
Ive tried replacing HTML new line hex, and decimal unicode, ive tried replacing \n \r with an empty string, which didnt work either. Im outta luck.
How can i beat these evil new lines? (without having to make IntelliJ comments, or writing my HTML in a single line manually?)
you could replace the new lines with null:
advertisementHtml.replace( /\n/g, "" )
Remember the sorting of the line breaks.
String newString = overlayHtml.replaceAll("\\r\\n", "");
Alternatively one could do:
String newString = overlayHtml.replaceAll("\\r", "");
newString = newString.replaceAll("\\n", "");

Adding a line in javascript code

function calcPrimesLoop() {
var primes = document.getElementById('primes');
primes.appendChild(document.createTextNode(" , /n , "+this.prime.nextPrime()));
calcPrimesDelay = setTimeout('calcPrimesLoop()', this.delay);
}
Okay so this is my code I am displaying an array of prime numbers. The issue is that I want each prime number to be on a seperate line but I am unable to do this. I have tried /n and but they have not worked. It is being displayed in a textarea in html. Thank you
You could append a br element:
primes.appendChild(document.createElement('br'));
...although usually the way you'd want to do this would be to put the primes in some kind of element container that you could style appropriately with CSS. A series of divs would automatically stack vertically:
var div = document.createElement('div');
div.appendChild(document.createTextNode(/*...your prime...*/));
primes.appendChild(div);
Two side notes on this line:
calcPrimesDelay = setTimeout('calcPrimesLoop()', this.delay);
First, it's almost always best to use function references, not strings, with setTimeout. So:
calcPrimesDelay = setTimeout(calcPrimesLoop, this.delay);
Second, unless you're declaring calcPrimesDelay somewhere you haven't shown, you're falling prey to The Horror of Implicit Globals.
You should use a backslash instead of a forward slash (\n)
EDIT: The below only applies to "normal" elements. For a textarea, you should be doing primes.value += " , \n , "+this.prime.nextPrime();
Additionally, newlines are collapsed in HTML (if you write text on multiple lines in your source code, it comes out on one line) but you can "fix" this using simple CSS:
primes.style.whiteSpace = "pre-wrap";
Spread the word about white-space! People need to stop using <br /> tags just to get a newline!

Javascript regex replace between closing and opening tags

I realise this must be a really easy piece of regex, but just can't seem to work it out. I just need to search a string for this:
</p><p>
And add a comma between them, like this:
</p>,<p>
Ignore the fact it isn't nice html, it makes sense to me though!
I tried this, but didn't seem to work:
str.replace(/<\/p><p>/g, "</p>,<p>");
Any ideas? Thanks :)
I tried this, but didn't seem to work:
str.replace(/<\/p><p>/g, "</p>,<p>");
replace returns a new string with the result, it doesn't modify the string you called it on. So that would be:
str = str.replace(/<\/p><p>/g, "</p>,<p>");
// ^^^^^^
This works for me:
alert("Some </p><p> to replace".replace(/<\/p><p>/g, "</p>,<p>"));
Your code works just fine: http://jsfiddle.net/eBkhR/
Strings in javascript are immutable. That is, the contents in a string cannot be modified. Therefore, when using replace method it cannot replace the content but it just returns a new string with the new contents. You would need to store the new string the in required variable.
for example,
str = str.replace(/<\/p><p>/g, "</p>,<p>");
The answers with alert will work because the new string is getting passed to the alert function. The string itself is not modified.
My fault. It does work. I'd forgotten that I have ids in each p tag, so just needed to search for this:
/<\/p><p/g
Thanks for all the replies though!

Categories