Keywords Highlighting Component

[Achyut Pokhrel]

I have an array of all keywords (lets say originalArray[ ]) and another array of matched keywords(lets say matchingArray[ ]).

Now I want to render all elements of originalArray but those elements that are common in both arrays must be bold. (or lets say matching keywords must be bold) 

My solution was:

1. Create a custom component :

<my-highlighter matches="matchingArray[ ]"> originalArray[ ] </my-highlighter> 

2. Inside <my-highlighter>, I will render content  of originalArray[ ] using <content id="all-keywords"></content>

3. And inside ready() method of <my-highlighter>, I will use regular expression to find all matching keywords from matches property in <content id="all-keywords"> and apply css to bold them.

I didn't like the concept of using regular expression. 

Are there any other better ways to solve this problem?