jquery, parse partial text input to formatted html output?

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.

enter image description here

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.

Wolfpack'08 · Accepted Answer · 2012-10-26 01:08:08Z

5

uls = val.replace(/(^-.*$(?:\n^-.*$)*)/mg, "<ul>\n$1\n</ul>")
lis = uls.replace(/^-(.*)$/mg, '<li>$1</li>')
$("#output").html(val);

Is this what you were looking for? It's not perfect, but it does the basics.

It works as follows:

Surround the would be lists with <ul></ul>
    This works by finding lines that start with a '-' |^-.*$|,
    then matching contiguous, similar lines |(?:\n^-.*$)| 0 or more times |*|
    it uses the multiline (m) and global (g) flags too:
      match ^ and $ at the begining and end of lines (m)
      and get all the ones in the string (g)
    surround them (<ul>\n$1\n</ul>)
Surround the list items with <li></li>
     match lines with a hyphen at the beginning |^-(.*)$|
     surround them (<li>$1</li>)

edited Oct 26, 2012 at 1:08

Wolfpack'08

4,15813 gold badges52 silver badges82 bronze badges

answered Oct 24, 2012 at 1:09

FrankieTheKneeMan

6,8082 gold badges29 silver badges39 bronze badges

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

5 Comments

Wolfpack'08 Over a year ago

Thank you. The explanation is very clear. Regex is always a very troublesome topic for new programmers, I think, so I hope that everybody reads your answer.

Wolfpack'08 Over a year ago

You're using console.log, and he's used a keyup function. What's the difference?

FrankieTheKneeMan Over a year ago

Actually, I've also used a key up function (see the html). The console.log was for when I was debugging it. Ignore it.

Wolfpack'08 Over a year ago

Actually, I cannot see the changes as having been comitted to your JS fiddle; otherwise, thank you for the explanation of your regex.

FrankieTheKneeMan Over a year ago

jsfiddle.net/Ns9eL/3 - but the only thing I did was remove console.log. If you look up at the html, you'll see the textarea has an onkeyup function.

Andrew Cheong · Accepted Answer · 2012-10-26 16:56:35Z

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:

Treat series of newlines as one newline.
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,

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, (?:...)+,
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, (?:^|...),
however we are now interested in capturing the list item text, so we add a capturing group, (...).

edited Oct 26, 2012 at 16:56

answered Oct 24, 2012 at 1:05

Andrew Cheong

30.4k17 gold badges103 silver badges173 bronze badges

15 Comments

Wolfpack'08 Over a year ago

It's definitely a strong start. I'm trying to orchestrate it with my other code, now, which is seen here: jsfiddle.net/5ZXnx. I haven't been able to do that yet, but I can see that there's a strong overlap. When I think jquery, I always think 'instantaneous'/'no refresh'/'preview', you know? I'll be back in an hour or two to let you know if I've been able to adapt it.

Andrew Cheong Over a year ago

@Wolfpack'08 - Hm, you may have seen my original version, where I used the change event, but if you refresh, the latest version uses keyup, so there is instantaneous updating as-you-type. Also, I noticed a bug caused by the second pair of \s* in each expression; they had to be replaced by [\t ].

Andrew Cheong Over a year ago

Oh, good point. Yeah, you've got the idea. I couldn't think of an elegant way to incorporate this, though. See edited solution...

Andrew Cheong Over a year ago

@Wolfpack'08 - Explanation added. To answer your question though, I needed one group to encapsulate "one or more {list items}", i.e. (...)+, and one group to encapsulate "start-of-string OR newlines", i.e. (^|[\n\r]+), and since I don't need them to be captured (i.e. into $2 and $3), I made them non-capturable. I could have left them capturable; it wouldn't have mattered. I just like to explicitly make any group I don't use, non-capturable.

Andrew Cheong Over a year ago

@Wolfpack'08 - It's always interesting to see how new eyes perceive things! It seems you view the ?: as a "not" of some sort, thus you see ?:?: as "not not". Instead, think of (?: ... ) as an entirely different kind of brackets, separate from ( ... ). Why the language designers chose (?: ... ), I'm not sure. As for the \n, nope, not useful; I added the \ns so the output in the <pre></pre> would look nice in jsFiddle.

|

mralexlau · Accepted Answer · 2012-10-24 02:34:11Z

1

Is there a reason you're dead set on using regular expressions? Although they're nice in that they're efficient and concise, I often find them hard to read if I'm going back to them later.

I would probably approach the problem the same way you did, only I'd wrap each list item in its own list to handle sublists:

<ul><li>item 1</li></ul>
<ul><li>item 2</li></ul>

Rather than:

<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

Which handles a mix of list and non-list items gracefully. The only reason I wouldn't use this approach is if I had to manipulate everything in a list together later on (eg - style the first list but not the second one).

Example in JsFiddle (thanks to FrankieTheKneeMan for the css for ul's)

answered Oct 24, 2012 at 2:34

mralexlau

2,0342 gold badges17 silver badges24 bronze badges

1 Comment

Wolfpack'08 Over a year ago

also, target with xpath and such changes when you use <ul><li>item 1</li></ul> <ul><li>item 2</li></ul>

Collectives™ on Stack Overflow

jquery, parse partial text input to formatted html output?

3 Answers 3

5 Comments

15 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

15 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related