How to add text in new lines in an ejs file - javascript

Right now I am trying to alter the body of my ejs file with javascript embedded.
Here is the code :
<body>
<%- include('navbar.ejs'); %>
<div class="novel" id="title">
<p>Novel Title</h3>
</div>
<div id="skip"><button>
First
</button>
<button>
Last
</button></div>
<p>
<% for( let index = 0; index < text.length; index++ ) { %>
<%- text[index] %>
<% } %>
In the for statement, the text variable is a list of a very long string that contains the text of a novel. And every item in the list is separated by the new line so now I want to print it out in the ejs file with each line in a new one.
In this case, it would be like doing
document.write("/n")
If it were to work on an ejs file.
Thank you in advance.

try testing every character against newline regex, and if true, add a <br>, else the character:
<% for( let index = 0; index < text.length; index++ ) { %>
<%- (/\r\n|\n|\r/).test(text[index]) ? '<br>' : text[index] %>
<% } %>
or simply split the string by newline, which creates an array which you can join with <br>:
<%- text.split(/\r\n|\n|\r/).join('<br>') %>
you should escape string by using <%= tags, which will require modifying the code.
One option would be to split the string, and then output escaped string along with your HTML newline:
<% const split = text.split(/\r\n|\n|\r/); %>
<% split.forEach(line => { %>
<%= line %><br>
<% }); %>

Related

Using RegExp and eval() to replace a value

I need to use RegExp to replace a string and eval() to execute the object.
In my code below, I'm currently in a forEach of items.
item.url : http://localhost:3000/formation/[[item.id]]/[[item.launch_url]]
My code :
<% _.forEach(items, function(item) { %>
<% _.forEach(tableLineActions, function(tableLineAction) { %>
<% if (tableLineAction.conditionToShow) { %>
<% var label = tableLineAction.label; %>
<% var url = tableLineAction.url.replace(/\[\[item.id\]\]/g, item.id).replace('[[modelName]]', modelName).replace('[[item.seo_url]]', item.seo_url); %> // not reusable code
<% url = eval(url.replace(/\[\[/g, '').replace(/\]\]/g, '')); %> // test of a reusable code
<li><icon class="material-icons"><%=tableLineAction.icon%></icon><%=label%></li>
<% } %>
<% }); %>
<% }); %>
Error message : Invalid regular expression flags
I found a solution but this one is not maintenable if I want to send severals properties :
url = url.replace(/\[\[item.id\]\]/g, item.id).replace(/\[\[item.launch_url\]\]/g, item.launch_url)
With this solution, I need to add a new replace() method when a new property is sending and I want something more reusable without specifying all properties to replace.

Node.js ejs - How to convert a comma string into an array in the ejs templated and loop over

I know I could convert the comma string into an array on the server side. Yet, is there also a way to convert a comma string into an array on the ejs template itself and then loop over the array and check if a certain value exists?
server.js
res.render('user', {
page: 'User',
menuId: 'user',
groupID: '0,1,10702,10802'
});
user.html
<% for(var i=0; i < groupID.length; i++) { %>
<% if (groupID[i] == '1') { %>
<span>Admin</span>
<% } %>
<% } %>
That's totally possible:
<% groupID.split(",").forEach(element => { %>
<% if (element === "1"){ %>
<span>Admin</span>
<% } %>
<% }); %>
Note: EJS Templates are still rendered on the Server-side! So it doesn't really matter if you just pass an Array from your server.js to EJS.

Stop javascript from implicitly converting string to int

So I have a datapoint object with fields date(string) and count(integer). I'm trying to add them to arrays with some JS inside of my show view. Everything is working well - except that my date string is being converted to a series of JS arithmetic. For example: a value of "2015-05-05" is getting converted to 2005. Code follows:
<h1 id="chart"></h1>
<script language="javascript" type="text/javascript">
var counts = ['Count']
var dates = ['x']
<% #chart.datasource.datapoints.each do |c| %>
dates.push( <%= c.date %> )
counts.push( <%= c.count %> )
<% end %>
chart(counts, dates);
</script>
You're missing quotes:
var counts = ['Count']
var dates = ['x']
<% #chart.datasource.datapoints.each do |c| %>
dates.push( "<%= c.date %>" )
counts.push( <%= c.count %> )
<% end %>
chart(counts, dates);
Wrapping the value in quotes will force JS to consider it as a string primitive, rather than a number and arithmetic operators.

create a comma separate list of links in ejs using express

I have an array of usernames that is accessible in my ejs template.
I want to create a comma-separated list of links like this:
user1, user2 and user3
Rendered html would look like this (with the usernames being links):
user1, user2 and user3 have added items to your list.
I can loop through and put them all on their own line, but how would I join that output with commas (the last one having "and")?
<% usernames.forEach(function(username){ %>
<%= username %>
<% }) %>
Is there anyway to join this output on comma and add 'and' with no comma for the last one?
This is what I came up with:
<% creators.forEach(function(username, i, arr){ %>
<%= username %><%= ( arr.length > 0 && i < arr.length-1 ? ( i == arr.length-2 ? ' and ' : ', ' ) : '' ) %>
<% }) %>
<%= creators.length > 1 ? 'have' : 'has' %> created lists or items for <%= owne
r.username %>.</p>

How can I return javascript from a Ruby on Rails helper method?

I have a Note model, which can contain have either an image link attachment (linktype = "image" or some text (linktype = "text). When I display the notes, the method of display changes depending on the linktype. An example is:
<% #notes.each do |q| %>
<h2 class="title"><%= q.name %></h2>
<% if q.linktype == "other"%>
<script type="text/javascript">some javascript</script>
<% elsif q.linktype == "text"%>
<%= q.text %>
<% elsif q.linktype == "image"%>
<img src="<%= q.link %>" />
<% end %>
<% end %>
I have to display the notes in a few different views in my site, so rather than have to repeat the viewing code multiple times, I want to have it in one place and refer to it from different views.
My initial thought was to put the display code in a helper, something like this:
<% #notes.each do |q| %>
note_display(q.linktype, q.link)
<% end %>
But some of the displaying involves javascript (line 4 in first code block). Can I still use a helper method, even though I would need it to return javascript? If so, how do I do it? Thanks for reading.
There's nothing special about javascript, you can return it from helpers as you would return other html content. The only thing I would suggest is to use helpers for tags like
image_tag(q.link)
javascript_tag("some javascript")
content_tag("h2", q.name, :class => "title")
As far as ERB is concerned, JavaScript is just string content like anything else rendered by a template. So your helper method can just construct and return a string:
def note_display(note)
content = ''
content << content_tag('h2', h(note.name), :class => 'title')
if note.linktype == 'other'
content << javascript_tag("some javascript")
elsif note.linktype == 'text'
content << h(note.text)
elsif note.linktype == 'image'
content << image_tag(note.link)
end
content
end
You can use this helper method using:
<% #notes.each do |n| %>
<%= note_display(n) %>
<% end %>

Categories