JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/xregexp/2.0.0/xregexp-all-min.js"></script>
<input type="text" id="search_box_input" />
<input type='button' id='chkDuplicate' value="Click Me">

<div id="search" dir="rtl">
بسم الله الرحمن الرحيم
<br>
بـــسم الــلــه الرحمـــن الرحيــــــم

</div>

CSS

.highlight { background: #FFFF40; }

JavaScript

$('#chkDuplicate').click(function () {
var txtbox = document.getElementById("search_box_input").value
//alert(txtbox);
$("#search").easymark('removeHighlight');
$("#search").easymark('highlight',txtbox);
});



(function($) {

var charToAccentedCharClassMap = {

"\u0623":'([\u0627\u0625\u0622\u0623]\\p{Mn}+|[\u0627\u0625\u0622\u0623])',
"\u0627":'([\u0627\u0625\u0622\u0623]\\p{Mn}+|[\u0627\u0625\u0622\u0623])',
"\u0625":'([\u0627\u0625\u0622\u0623]\\p{Mn}+|[\u0627\u0625\u0622\u0623])',
"\u0622":'([\u0627\u0625\u0622\u0623]\\p{Mn}+|[\u0627\u0625\u0622\u0623])',
"\u06D6":'(\u06D6\\p{Mn}+|\u06D6)',
"\u0628":'(\u0628\\p{Mn}+|\u0628)',
"\u062A":'(\u062A\\p{Mn}+|\u062A)',
"\u062B":'(\u062B\\p{Mn}+|\u062B)',
"\u062C":'(\u062C\\p{Mn}+|\u062C)',
"\u062D":'(\u062D\\p{Mn}+|\u062D)',
"\u062E":'(\u062E\\p{Mn}+|\u062E)',...