How to add line breaks into HTML using Javascript

Question

I'm working on a website that uses a datafeed. Within that datafeed (that comes in via a CSV file) there is a paragraph of text. The client is entering the text in bullet point format and would like it to be displayed as such. For example:

First point here... * Second point here... * Third point here...

(The client is using the asterix for all points, it's the text editor here converting the first into a bullet point)

Does anyone know a way I'm able to insert line breaks before all but the first asterix so this appears as a list? Maybe with a little javascript?

Ideally the list would appear like this:

First point here...

Second point here...

Third point here...

Thanks in advance,

Tom

You could just replace the asterisks with an li (as they don't need to be closed): text.replace('*', '<li>'); — Pete
– Pete, Commented Jul 14, 2015 at 9:27
Create a list (an unordered <ul>) and make list items (<li>) out of all text nodes beginning with asterix. Make the formatting with CSS, you can set different style for the first list element with the selector li:first-child. — cezar
– cezar, Commented Jul 14, 2015 at 9:28
@user3425760 the closing tag for an li is optional: w3.org/TR/html-markup/li.html — Pete
– Pete, Commented Jul 14, 2015 at 9:32
Thanks for the suggestion @Pete, how should I insert that into the page, within a script tag I presume? Maybe like this... <script type="text/javascript"> $(document).ready(function () { text.replace('*', '<li>'); }); </script> — Tom Perkins
– Tom Perkins, Commented Jul 14, 2015 at 9:38

Pete · Accepted Answer · 2015-07-14 10:07:21Z

2

ok I'm guessing here from a mixture of your question and comments but it looks as if the rendered html of your list would be something like this:

<ul>
    <li>First point here... * Second point here... * Third point here...</li>
</ul>

From your comment, it looks as if you are using jQuery so you can do something like this:

$(function() {
    $('li').each(function() {
        var listItem = $(this),
            text =  listItem.text().replace(/\*/g, '<li>');

        listItem.html(text);
    });
});

Example

answered Jul 14, 2015 at 10:07

Pete

58.8k31 gold badges132 silver badges187 bronze badges

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

3 Comments

Tom Perkins Over a year ago

Thanks @Pete, the html code is: <p class="property_description">* First point here... * Second point here... * Third point here...</p>. I've updated the script to focus on .property_description but do you know if there is a way to get the script to also add in an opening and closing <ul> tags, but only in cases where asterix's are featured?

Pete Over a year ago

@TomPerkins, I would do something like this: jsfiddle.net/enwwc8q6 but it relies on the asterisk text being the only text in the paragraph

Tom Perkins Over a year ago

that looks perfect, thank you so much. Please let me know if there's anything I can help you with.

Maxim Gritsenko · Accepted Answer · 2015-07-14 09:28:05Z

1

Using regular expressions your can write:

input.replace(/\s\*/g, '\n&bull;');

This will replace all * preceeded by space characters by a bullet symbol started from a new line.

If you need to make a real HTML markup out of the input (like li tags), you will have to dig into regexp a little deeper. This MDN page is a great place to start.

answered Jul 14, 2015 at 9:28

Maxim Gritsenko

2,61015 silver badges27 bronze badges

Comments

GluePear · Accepted Answer · 2015-07-14 09:37:27Z

1

Combining the answers you already have, you could use a regular expression to replace the asterisks with <li>. E.g.:

HTML

<div id="output"></div>

Javascript

var str = ' * one * two * three';
str = str.replace(/\s\*/g, '<li>');
$('#output').html('<ul>'+str+'</ul>');

Jsfiddle

answered Jul 14, 2015 at 9:37

GluePear

7,77321 gold badges72 silver badges127 bronze badges

Collectives™ on Stack Overflow

How to add line breaks into HTML using Javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related