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

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

Related

New line character not being printed when setting innerHTML

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

ejs won't print a new line in a variable

I have a web app in Node.js/MySQL where users can upload their stories. They write in an HTML textarea tag. Now I'm trying to get the uploaded from the database using ejs into a script tag so I can do further 'processes'
<script>
var text = "<%=story.Content%>",
result = anchorme.js(text);
document.getElementById('story-content').innerHTML = twemoji.parse(result);
</script>
Problem is if the user hit enter to start on a new line while writing. It'll give me an error here in the text variable and nothing will be printed so how do I fix this?
If you view source on the page so that you can see how the browser receives it, you'll see something like this - note the line feeds:
var text = "I am a story over multiple lines
and that's what javascript gets confused about
because it can't figure out where the closing quotes are.
Let's not even go into what could happen when someone uses quotes!"
So you really just need a way to pass the story content to javascript without it breaking the page. Instead of just pushing out the string like this...
var text = "<%=story.Content%>"
...you can pass stuff to javascript in JSON format as that allows and escapes newlines into \r\n and quotes into \" and so-on. Note the use of <%- rather than <%= here because you don't want it to pass escaped HTML:
var text = <%-JSON.stringify({ content: story.Content })%>.content;
That passes an object with a nicely escaped string in it to your inline script for it to carry on processing.

Why this doesn't display HTML

In my angular application, among the data I retrieve, there is some text potentially containing line breaks, links, and other stuffs I need to convert to HTML. So I implemented this function to "convert" those string to html:
$scope.textToHTML = function(text){
if(!text){return "";}
var html = text.replace("\r\n", "<br>")// Windows line break
.replace("\n", "<br>")// Carriage Return
.replace("\r", "<br>")// Line feed
.replace("\t", "<span style=\"margin-left: 20px;\"></span>")
.replace("(https?:\\/\\/[^\\s]*)", "$1");
return $sce.trustAsHtml(html);
}
Then I'm using it as this:
<p data-ng-bind-html="">{{textToHTML(company.description)}}</p>.
When I remove data-ng-bind-html, I see the excpected code (escaped) but with it, my <p> is always empty. I read Angular $sce doc, but I must be missing something because I still don't quite understand what trustAs() do...
Is it supposed to return a sort of a string with code that can be interpreted safely ?
Or is it supposed to say angular "this string is safe, if you see it in an data-ng-bind-html attribute display it as if !"
Correct usage of the ngBindHtml would be:
<p data-ng-bind-html="textToHTML(company.description)"></p>

java script failing because of white spaces caracters

I have in my views some code as this
$(".someclass").hover(function(){
$(this).append("#{render "layouts/show_some_file", title: "some_file"}");
});
The show_some_file.html.haml file consists of two nested basic divs
In my browser, I get
$(".someclass").hover(function(){
$(this).append("<div>
<div>some text</div>
</div>
");
});
On hover, I get in my chrome console SyntaxError: Unexpected token ILLEGAL. I deleted my white spaces in my console, and it worked. But how to clean the white spaces in my ruby rendering ?
I am not entirely certain it will help, but you probably should use the "<%= render ... %>" variant rather than the #{}
And since it's for javascript, the correct way would be "<%= escape_javascript(render ...) %>"
If using HAML, substitute the ERB for however the markup is written there.
Edit: might be
!= "$(this).append("#{escape_javascript(render "layouts/show_some_file", title: "some_file")}");"
Since the result of your {#render} is HTML, and although you might use it once, it might make more sense to store it in HTML, and retrieve it with JavaScript. Mimicking templating, here's an example of what I mean:
<script id="my_render" type="text/template">
#{render "layouts/show_some_file", title: "some_file"}
</script>
<script type="text/javascript">
$(document).ready(function () {
var render_content = $("#my_render").html();
$(".someclass").hover(function () {
$(this).append(render_content);
});
});
</script>
It kind of acts like a template. You use a script tag, but you set its type to something that doesn't cause it to be executed. Since script tags are never visible on a page, you would never have visual problems...unlike doing this inside of a div...the HTML is then "separate" from the rest of the page.
I'm sure there's a better solution using Ruby, but if you're outputting a partial view to JavaScript code, I'd have to ask why. It makes more sense to me to put in a "template". I understand this doesn't directly answer your immediate question, but it's an alternative :)
In fact, I got it, one of the right thing to do is :
$("someclass").hover(function(){
$(this).append("#{escape_javascript render "layouts/show_some_file", title: "some title"}");
});
The obvious thing to do is edit layouts/show_some_file & remove white space. It's not really whitespace that's the problem, but carriage returns. Javascript doesn't like multi-line strings. If I knew Ruby, I could probably write a regex that gets rid off stuff like "\r\n", which is carriage return line feed in PHP/C syntax.

Problem with regexp in userscript for chrome

This might be a noob question, but I have tried to find an answere here and on other sites and I have still not find the answere. At least not so that I understand enough to fix the problem.
This is used in a userscript for chrome.
I'm trying to select a date from a string. The string is the innerHTML from a tag that I have managed to select. The html structure, and also the string, is something like this: (the div is the selected tag so everything within is the content of the string)
<div id="the_selected_tag">
link
" 2011-02-18 23:02"
thing
</div>
If you have a solution that helps me select the date without this fuzz, it would also be great.
The javascript:
var pattern = /\"\s[\d\s:-]*\"/i;
var tag = document.querySelector('div.the_selected_tag');
var date_str = tag.innerHTML.match(pattern)[0]
When I use this script as ordinary javascript on a html document to test it, it works perfectly, but when I install it as a userscript in chrome, it doesn't find the pattern.
I can't figure out how to get around this problem.
Dump innerHTML into console. If it looks fine then start building regexp from more generic (/\d+/) to more specific ones and output everything into a console. There is a bunch of different quote characters in different encodings, many different types of dashes.
[\d\s:-]* is not a very good choice because it would match " 1", " ". I would rather write something as specific as possible:
/" \d{4}-\d{2}-\d{2} \d{2}:\d{2}"/
(Also document.querySelector('div.the_selected_tag') would return null on your sample but you probably wanted to write class instead of id)
It's much more likely that tag.innerHTML doesn't contain what you think it contains.

Categories