Use case
--------

API returns a string with something like `The ingredients are * apple* carrot *potato`. Note that the spacing between the bullet points will not often be consistent.

In the element where I am populating a long string I will only get a brief title and a list. So I want the list (the portion of the string will start with a `*`) to first get wrapped with a `<ul>` then to have every item get wrapped with an `<li>`.

---

### Sample string

```
This is a list of sodas * Dr. Pepper *LaCroix * 7up  *sprite * Fanta * Coke Zero *Pepsi

```

### Steps that should get executed

1. Wrap `* Dr. Pepper *LaCroix * 7up *sprite * Fanta * Coke Zero *Pepsi` in a `<ul>`
2. Wrap individual items in a `<li>`
3. Grab the bullet point `*` and spacing between that and any character and remove it.

### Desired innerHTML output

```
This is a list of sodas
<ul>
    <li>Dr. Pepper</li> 
    <li>LaCroix</li>
    <li>7up</li>  
    <li>sprite</li> 
    <li>Fanta</li> 
    <li>Coke Zero</li> 
    <li>Pepsi</li>
</ul>

```

---

Demo
----

Current demo on [CodePen](https://codepen.io/JGallardo/pen/bjNmNM)