Whastapp message highlighter

0
Hi Team, Need one info I’m trying to implement a search functionality where in the messages if I write something and search  containing that text entered by the user should be highlighted it is similar to ctrl+f (controll find) otpion Thanks 
asked
1 answers
0

Hi Maheswara Reddy Potham setty,

          As per my understanding, you want to highlight the text based on the search. Right? Here, I have achieved text highlighter with the help of javascript. I will explain you briefly.

 

First of all, you need to download highlight-text npm package through the link below.

https://www.npmjs.com/package/@brianmcallister/highlight-text#installation

Once you install those packages in your "/deployment/javascriptsource/yourmodulename/" directory through the npm command, it will download and save those required packages in your module folder.

In my modeler, I have created one Chat entity with two attributes Message and Query. Both are string datatype. I have created a page with two input textboxes and one text widget which needs to be highlighted in our case.

 

For that text widget, I have given a class name like ("highlight").

By using the Set attribute widget, I have added the id locator to that (.highlight) class name text widget.

 

I just gave message and query string with space delimiters to be highlighted in that text widget message input.

 

I just gave message and query string with space delimiters to be highlighted in that text widget message input.

In that javascript action call, I have imported the highlight-text module and I have passed two arguments to that highlight function.

This highlight function will return string value. Return value will look like <mark>He</mark>y <mark>Bud</mark>dy.

By using Javascript dom elements, I am just appending the return value in that message text widget. So finally, the output will look like this.

 

I hope, this information will be helpful for you. If this answer helps you, you can mark this answer as accepted to help others. If you have any doubt regarding this, kindly let me know!

Thanks and regards,
Vijayabharathi V 

answered