0

I'm using the highlight-text-inside-a-textarea plugin, https://codersblock.com/blog/highlight-text-inside-a-textarea/ which works fine but I have an issue with the accented words. For example here is my array of the keywords to highlight $kw = array("excel","Réseau","R","electrom"); but as you can see the keyword "electromécanique" is getting half highlighted. How can I avoid this? It's probably something to do with the RegExp.

enter image description here

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="/jquery/highlight-within-textarea.js"></script>
<link rel="stylesheet" type="text/css" href="/jquery/highlight-within-textarea.css"/>

</style>
</head>
<body>

<h1>Highlighted Keywords Test</h1>

<div id="job">
  <textarea cols="50" rows="5">excel Réseau Robert electromécanique R electromecanique</textarea></div>

<?php

$kw = array("excel","Réseau","R","electrom");

        foreach($kw as $kws) {
   
      $keywords_highlight[] = $kws;
      
        }

?>

<script>    

var arrHighlight =  <?php echo json_encode($keywords_highlight); ?>;

function escapeRegExp(arrHighlight) {
  return arrHighlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}

var pattern = new RegExp("(?<![\\w-])(?:" + arrHighlight.map(escapeRegExp).join("|") + ")(?![\\w-])", "gi");

$('textarea').highlightWithinTextarea({
    highlight: pattern
});

</script>

</body>
</html>
Seb
  • 83
  • 1
  • 10
  • Use Unicode aware word boundaries, just add `-` into the character classes there since your boundaries also include `-`s. – Wiktor Stribiżew Apr 01 '21 at 15:26
  • Thanks for your reply. RegExp is not my forte, so I guess for the unicode I have to add the "u" flag like that "giu". But then I'm not sure where to add the hyphen"-". – Seb Apr 01 '21 at 17:13
  • Not only. See the solution [here](https://stackoverflow.com/a/66680311/3832970). Adding `-` is just like `[\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]` => `[-\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]` – Wiktor Stribiżew Apr 01 '21 at 17:15
  • Got it. Thanks for your time, much appreciated. – Seb Apr 01 '21 at 17:53

0 Answers0