How to match all word which starts with a space and character

Question

i have problem with highlighting word which starts with space and begins with some character.

those character is listed below:

var list = ['Alex','&','2009','>','ph']; // comes dynamically

Question: highlight whole word if it starts with space and begins with find search key. in case of exact match highlight them.

test cases:

 1. with `ph` `Philip's` should highlight.    not `.Philip's`
 2. with `>` `>20` should highlight.

below is what i have tried:

var list = ['Alex','&','2009','>','ph']; // comes dynamically

var textDescription = `Alexander the Great (Ancient Greek: Ἀλέξανδρος ὁ Μέγας, romanized: Aléxandros ho Mégas), was a king (basileus) of the ancient Greek kingdom of Macedon[a] and a member of the Argead dynasty. He was born in Pella in 356 BC and succeeded his father Philip II to the throne at the age of 20. He spent most of his ruling years on an unprecedented military campaign through Asia and northeast Africa, and by the age of thirty, he had created one of the largest empires of the ancient world, stretching from Greece to northwestern India.[1][2] He was undefeated in battle and is widely considered one of history's most successful military commanders.[3]

During his youth, Alexander was tutored by Aristotle until age 16. After Philip's assassination in 336 BC, he succeeded his father to the throne and inherited a strong kingdom in 2009 BC & 2010 BC. Alexander is > 20090 people.  .>20 and >20.34&&() and 30> >`

var pattern = new RegExp(`(?<=(^|\\W))((\s\w*)${list.join('|')})(?=(\\W|$))`, 'ig')
var textDescription = textDescription.replace(pattern, '<highlight>$2</highlight>')

$('#highlight').html(textDescription)

highlight {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="highlight"></div>

Answer 1

Since you want spaces, you can use \s to find the space using the lookbehind, and \S* to find the characters after the list item that are not spaces.

Note: Lookbehinds are not universally supported. Most notably Firefox, Edge, and IE (as added in this comment by MonkeyZeus).

var list = ['Alex','&','2009','>','ph']; // comes dynamically

var textDescription = `Alexander the Great (Ancient Greek: Ἀλέξανδρος ὁ Μέγας, romanized: Aléxandros ho Mégas), was a king (basileus) of the ancient Greek kingdom of Macedon[a] and a member of the Argead dynasty. He was born in Pella in 356 BC and succeeded his father Philip II to the throne at the age of 20. He spent most of his ruling years on an unprecedented military campaign through Asia and northeast Africa, and by the age of thirty, he had created one of the largest empires of the ancient world, stretching from Greece to northwestern India.[1][2] He was undefeated in battle and is widely considered one of history's most successful military commanders.[3]

During his youth, Alexander was tutored by Aristotle until age 16. After Philip's assassination in 336 BC, he succeeded his father to the throne and inherited a strong kingdom in 2009 BC & 2010 BC. Alexander is > 20090 people.  .>20 and >20.34&&() and 30> >`

var pattern = new RegExp(`((?<=(^|\\s))(?:${list.join('|')})\\S*)`, 'ig')
var textDescription = textDescription.replace(pattern, '<highlight>$&</highlight>')

$('#highlight').html(textDescription)

highlight {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="highlight"></div>

Answer 2

You need to:

• Make sure your search texts are escaped to be used in regex
• Make sure the rest of the non-whitespace chars after the search texts are matched (use \S* for that)
• Use (\s|^) left-hand boundary (or (?<!\S) if you are targeting ECMAScript 2018+ JS environments only) to match a whitespace or start of string (as (?<!\w) = (?<=(^|\W)) matches any location that is not preceded with a word char, i.e. letter, digit or _).

The fixed code will look like

var list = ['Alex','&','2009','>','ph'];

var textDescription = "Alexander the Great (Ancient Greek: Ἀλέξανδρος ὁ Μέγας, romanized: Aléxandros ho Mégas), was a king (basileus) of the ancient Greek kingdom of Macedon[a] and a member of the Argead dynasty. He was born in Pella in 356 BC and succeeded his father Philip II to the throne at the age of 20. He spent most of his ruling years on an unprecedented military campaign through Asia and northeast Africa, and by the age of thirty, he had created one of the largest empires of the ancient world, stretching from Greece to northwestern India.[1][2] He was undefeated in battle and is widely considered one of history's most successful military commanders.[3]\n\n    During his youth, Alexander was tutored by Aristotle until age 16. After Philip's assassination in 336 BC, he succeeded his father to the throne and inherited a strong kingdom in 2009 BC & 2010 BC. Alexander is > 20090 people.  .>20 and >20.34&&() and 30> >";

var pattern = new RegExp('(\\s|^)((?:' + list.map(function(x) {
    return x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
}).join('|') + ')\\S*)', 'ig');
console.log(pattern);
var textDescription = textDescription.replace(pattern, '$1<highlight>$2</highlight>')

$('#highlight').html(textDescription)

highlight {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="highlight"></div>

So, the regex will look like

/(\s|^)((?:Alex|&|2009|>|ph)\S*)/gi

See the regex demo online. Details:

• (\s|^) - Capturing group 1: a whitespace or start of a string
• ((?:Alex|&|2009|>|ph)\S*) - Capturing group 2:
  • (?:Alex|&|2009|>|ph) - a non-capturing group matching any one of the search phrases
  • \S* - any 0+ chars other than whitespace

The replacement is Group 1 value ($1), <highlight>, Group 2 value ($2) and </highlight>.