JavaScript template: wrap each word in a string in an HTML element

Question

I'm trying to modify a JavaScript template such that each of the words in a particular string are wrapped in  elements. I have:

<% var tagString = "Happy Sad Up Down", tags = tagString.split(" "), wrappedTags = ""; %>
<% for (var i = 0; i < tags.length; i++) { %>
    <% wrappedTags += "<span>" + tags[i] + "</span>"; %>
<% } %>
<p><%=wrappedTags%></p>

The problem is that this outputs the "" and "" as text, not HTML, so I end up with the following text being displayed on the page:

HappySadUpDown

Is there any way within this syntax to output the wrapping  tags as HTML?

UPDATE: with regular (non-template) syntax, it works if I simply write wrappedTags to the page: http://jsfiddle.net/4QtUd/. However, I can't figure out the equivalent way to do this within the template syntax.

What template framework are you using?

Jacob T. Nielsen
– Jacob T. Nielsen

2012-10-23 20:05:25 +00:00
Commented Oct 23, 2012 at 20:05 — Jacob T. Nielsen
– Jacob T. Nielsen, Commented Oct 23, 2012 at 20:05

Jacob T. Nielsen · Accepted Answer · 2012-10-23 20:11:16Z

1

You could do something like this, outputting it directly within the loop.

<% var tagString = "Happy Sad Up Down", tags = tagString.split(" "); %>
<p>
<% for (var i = 0; i < tags.length; i++) { %>
    <span><%= tags[i] %></span>
<% } %>
</p>

answered Oct 23, 2012 at 20:11

Jacob T. Nielsen

2,9786 gold badges28 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

daGUY Over a year ago

Perfect! That's so obvious now, haha.

AntonNiklasson · Accepted Answer · 2012-10-23 14:38:16Z

0

Try replacing your < and >with HTML entities. http://www.w3schools.com/html/html_entities.asp

So basically: < -> < and > -> >

answered Oct 23, 2012 at 14:38

AntonNiklasson

1,7591 gold badge15 silver badges29 bronze badges

1 Comment

daGUY Over a year ago

That still outputs as text, so I get "Happy", etc.

Collectives™ on Stack Overflow

JavaScript template: wrap each word in a string in an HTML element

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related