Question

I’m looking at a very small amount of code:

var val = $("#id_input").val();
$("#output").text(val);

Which essentially takes the input into a field, <textarea id="id_input"></textarea>, and outputs it, exactly as it is.

What I’m trying to do is turn input newlines that begin with a - into output <ul><li></li></ul> on my site….

The approach I’ve been going at is to split the input by lines and then concatenate them, after passing each line through this:

function startsWith(string, pattern) {
  return string.slice(0, pattern.length) == pattern;
}

show(startsWith("-"));

I feel like there’s a more standard approach though? For example, I’ve read other posts on StackOverflow that use a find function to produce similar results. I’m suspicious of these because there’s no actual regex. It seems too good to be true.

In the image, you can see that green text is comments, white text is input, and black text is output.

I understand that there are existing technologies that have this functionality, but they come with a lot of other functionality. I’m trying to create an input that isolates this functionality.

Answer 1

Here’s a start that you can tweak yourself: jsFiddle.

I did it in two replacements, first to add the <ul></ul>, and next to add the <li></li>s. (Doing it in one step would’ve been easier if JavaScript supported lookbehind assertions; without them it’s still possible but messy.)

    val = val.replace(/((?:(?:^|[\n\r]+)[\t ]*-[\t ]*[^\n\r]*)+)/g, "\n<ul>\n$1\n</ul>");
    val = val.replace(/[\n\r]+[\t ]*-[\t ]*([^\n\r]*)/g, "\n  <li>$1</li>");

I made some assumptions while constructing this, which you may have to undo:

1. Treat series of newlines as one newline.
2. Remove spaces and tabs before and after the -.

The following input,

hello, world.
- two
- things
hi, again.
- three
 -more 
-things

creates the following output:

hello, world.
<ul>
  <li>two</li>
  <li>things</li>
</ul>
hi, again.
<ul>
  <li>three</li>
  <li>more </li>
  <li>things</li>
</ul>

EXPLANATION

The first regex simply identifies a set of list items.

(                   Captured group ($1).

    (?:             Group (one list item). -------------------+
                                                              |
        (?:         Group (for alternation). ---------+       |
                                                      |       |
            ^       Start-of-string                   |       |
                                                      |       |
            |           OR                      <-----+       |
                                                              |
            [\n\r]+     one or more newlines.                 |
                                                              |
        )                                                     |
                                                              |
        [\t ]*      (Ignore tabs and spaces.)                 |
        -           (Dash.)                                   |
        [\t ]*      (Ignore tabs and spaces.)                 |
                                                              |
        [^\n\r]*    List item text (everything but newlines). |
                                                              |
    )                                                         |
    +               One or more list items. <-----------------+

)

This set of list items, captured in $1, is wrapped in <ul></ul> tags:

"\n<ul>\n$1\n</ul>"

The second regex wraps each list item in <li></li> tags, and is very similar to the first, so it may be more useful to show what has changed:

first regex  : /((?:(?:^|[\n\r]+)[\t ]*-[\t ]* [^\n\r]* )+)/g
differences  :  xxxxxxxxx       x             (        )xxx
second regex : /         [\n\r]+ [\t ]*-[\t ]*([^\n\r]*)   /g

In words,

1. we no longer care about the set of list items, only each list item, so we can drop the non-capturable group that was used for quantifying, (?:...)+,

2. after the first regex substitution (which prepends a \n<ul>\n), it should be impossible for a list item to begin at the start of the string, so we can drop the alternation, (?:^|...),

3. however we are now interested in capturing the list item text, so we add a capturing group, (...).