Question: I would like to split up text by comma - i.e. keywords are as the following:

```
keyword1, keyword2, keyword3, keyword4

```

How can I have a the black style element for each and every keyword that is separated by a comma. Is there an easy way to do this? The text is always dynamic, so I never know exactly what those keywords will be and how many. So each keyword should have a box elements around it.

```
<span class="keyword-option-black">keyword1, keyword2, keyword3, keyword4</span>

.keyword-option-black {
    color:white;
    background-size:contain;
    margin:10px;
    padding:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background:black;
}

```

Answer: 
Using Django, I did it the following way.

1. Create a simple CSS class to perform the highlighting.
2. Create a custom tag that splits up data in template view into `<span class="keyword">A</span><span class="keyword">B</span>`. It takes the original view output and parses this into a format that already has the spans included.
HTML and CSS are static. Since you don't know how many keywords are gonna be there, you need something dynamic. Depending on implementation, you can use JavaScript or any Back-end language you are using.  

Basically, you want to add a span tag around each keyword and style that span (span in one with class keyword-option-black). So, when you enter keywords to HTML use `<span>keywordX</span>` in loop that adds elements or, alternatively, add those tags when document loads using JavaScript.  

Hope this helps.