codyparker / react-transform-words

React component that transforms words in a block of text with CSS changes, click actions, and more.
2 stars 0 forks source link

Question: Restrict to full word matches #1

Closed Dashue closed 5 years ago

Dashue commented 5 years ago

Hey, this library is just what I'm looking for with the exception of the word matching. I'm looking to match on full words only and not partial matching, is this something that's possible today or easy to add?

Thanks

codyparker commented 5 years ago

Hey - yeah, that's fairly easy to add. With regex it would be something like passing in: \bdog\b would match dog, but not hotdog. But right now it's escaping any regex characters (except pipe currently), so passing that in would create a search term wouldn't match anything.

I think I'll add in an option you could include with each word indicating if it's regex, to avoid escaping those characters.

I'll try to get that added tonight, but it may be tomorrow before it's updated. I hope that helps.

Dashue commented 5 years ago

Hey Cody, thanks for your time. I actually can't use this as at the time I didn't realize it didn't handle html very well.

Thanks

On Wed, 23 Jan 2019, 23:07 codyparker <notifications@github.com wrote:

Hey - yeah, that's fairly easy to add. With regex it would be something like passing in: \bdog\b would match dog, but not hotdog. But right now it's escaping any regex characters (except pipe currently), so passing that in would create a search term wouldn't match anything.

I think I'll add in an option you could include with each word indicating if it's regex, to avoid escaping those characters.

I'll try to get that added tonight, but it may be tomorrow before it's updated. I hope that helps.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/codyparker/react-transform-words/issues/1#issuecomment-457001953, or mute the thread https://github.com/notifications/unsubscribe-auth/AAc6vVrHQonMNN2vkIj7N_Zh4Cq5TorCks5vGOtJgaJpZM4aNeVd .

codyparker commented 5 years ago

No problem - I'll go ahead and push up the regex format change anyway.

When you say it doesn't handle HTML very well, are you trying to parse a string of HTML and highlight bits of it? Or do you mean it's not working as expected for you in some way?

Dashue commented 5 years ago

Yep exactly, it came out displaying the html tags as well

. So it seems to treat the html as text and render it back out as text. Maybe I'm doing it wrong?

codyparker commented 5 years ago

Yeah, it basically expects a string to parse, not full HTML. However, now that there is a regex format option, I'm sure it could be used to ignore HTML tags and just find the plain text.

I haven't really tested it much, but this seems to work and will ignore HTML tags and element attributes: (?<!</?[^>]*|&[^;]*)matchthis

So, you just need to replace matchthis with what you're searching for and it should find only regular text from the part you passed in. And to make it work by finding only entire words, you could use word boundaries

Hope that helps.