Question

I need to make words in a string select-able using regular expression in Javascript by adding span tag around select-able word. There are few conditions for a word to be select-able. They are,

1) A selectable word can consist of alphabets and numeric value, separated by space.

2) Any special character or combination of special characters appearing in-between word will also be part of selectable text. E.g. HTML#CSS is a single selectable word

3) Any special character or combination of special characters appearing in front or behind word won’t be selectable. E.g. HTML #CSS are two selectable words (HTML and CSS)

Exception to point 3
– $ (dollar sign) in front of word will be part of select-able word.
– ‘ (apostrophe sign) at end of word will be part of select-able word.

For example,

$45 will be <span>$45</span>
#45 will be #<span>45</span>
end. will be <span>end</span>.
said' will be <span>said'</span>
html#css will be <span>html#css</span>

Can anybody help me with regular expression for this? I am available if more information/clarification is needed. Thank you.

This is what I have come up till now – /([A-Za-z0-9\$]+)([A-Za-z0-9]+)([A-Za-z0-9']+)/g
but it runs successfully if there is atleast 3 chars in a word.

Answer 1

You can use this regex

(?:\s|^)([^a-zA-Z\d\$]*?)([a-zA-Z\d\$][^\s]*?)([^a-zA-Z0-9'-]*?)(?=\s|$)

and now you can replace it like this

$1<span>$2</span>$3