Question

I am going to put some sort of delimiter to define a boundary between field labels, field data, and separate fields in the text of options for a dropdown. This will be used to parse the text for a side visual. The user will be able to see the delimiter.

What should I use as a delimiter that the user wont notice but will still be easily distinguishable in a regex?

I was thinking of using square brackets (there will be no brackets in the data, and other delimiters can be screened as well).

[ --select some option-- ]
 | [name] Travis [number] 9801 [root] 99 |

Answer 1

If this is just to associate data with the element for handling on the client side, a better approach would probably be to store this info in data attributes. For example:

<select>
    <option value="1" data-name="Travis" data-number="9801" data-root="99">Travis</option>
</select>

Then JavaScript can use the data attributes (with jQuery it’s yourOption.data('root'), and with plain JavaScript you can use it like a normal attribute) and the user won’t even know it’s there unless he looks at your source.