Positive and negative lookaround in JavaScript regexes

Sometimes you need to solve a problem of this type: find the string 'aaa' and replace it with '!', but only if after 'aaa'⁅/s ⁆ is 'x', while 'x' itself is not replaced. If we try to solve the problem 'head-on', then nothing will come of it:



	'aaax baaa'.replace(/aaax/g, '!'); // returns '! baaa', but we wanted '!x baaa'


Lookahead

	To solve the problem, we need a way 
	to say that 'x' should not 
	be replaced. This is done with the 
	special parentheses (?= ), 
	which just look at, but don't take 
	with them.


	These parentheses are called 
	positive lookahead. Positive 
	- since 'x' (in our case) 
	should be - only then replacement 
	will occur.


	Let's use these parentheses to 
	solve our problem:


	'aaax aaab'.replace(/aaa(?=x)/g, '!'); // returns '!x aaab'


	There is also negative lookahead 
	- (?! ) - on the contrary, it 
	says that something should not be. In 
	the following example, the replacement 
	will only occur if 'aaa' is 
	NOT followed by 'x':


	'aaax aaab'.replace(/aaa(?!x)/g, '!'); // returns 'aaax !b'


Lookbehind

	Similarly, there is 
	positive lookbehind - (?<= ). In 
	the following example, the replacement 
	will only occur if 'aaa' is 
	preceded by 'x':


	'xaaa'.replace(/(?<=x)aaa/g, '!'); // returns 'x!'


	And there is also 
	negative lookbehind - (?<! ). In 
	the following example, the replacement 
	will only occur if 'aaa' is 
	not preceded by 'x':


	'baaa'.replace(/(?<!x)aaa/g, '!'); // returns 'b!'


Practical tasks

	
		Given a string containing 
		function names:
	
	
		let str = 'func1() func2() func3()';
	
	
		Get an array of the function 
		names from the string.
	


	
		Given a string with a tag:
	
	
		let str = '<a href="" class="eee" id="zzz">';
	
	
		Get an array of attribute 
		names for this tag.
	


	
		Given a string with 
		variables:
	
	
		let str = '$aaa $bbb $ccc xxxx';
	
	
		Get substrings preceded 
		by a dollar sign.