diff --git a/goon/browserassets/js/browserOutput.js b/goon/browserassets/js/browserOutput.js
index 094e8258562..b94734040bb 100644
--- a/goon/browserassets/js/browserOutput.js
+++ b/goon/browserassets/js/browserOutput.js
@@ -171,25 +171,67 @@ function setHighlightColor(match) {
 	match.style.background = opts.highlightColor
 }
 
+function escapeRegex(input){ // put this in a function incase it ever needs to be used elsewhere, makes code cleaner
+	return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
 //Highlights words based on user settings
 function highlightTerms(el) {
 	if(regexHasError) return; //just stop right there ig the regex is gonna except
+	function highlightRecursor(element,term){ //recursor function to do the highlighting proper
+		var regex = new RegExp("("+term+")","gi")
+		function replace(str) {
+			return str.replace(regex,'<span style="background-color:'+opts.highlightColor+'">$&</span>')
+		}
+		var s=''
+		var work=element.innerHTML;
+		var work_lc=work.toLowerCase()
+		var ind=0;
+		while(ind < work_lc.length) {
+			console.log(s);
+			var next_term=work_lc.substring(ind).search(regex);
+            if(next_term!=-1)next_term+=ind;
+			var next_tag =work_lc.indexOf('<',ind)
+			if(next_tag == -1) {
+				s+=replace(work.substring(ind));
+				break;
+			}
+			else if(next_term==-1) {
+				s+=work.substring(ind)
+				break;
+			}
+			else if(next_tag < next_term) {
+				var temp=work_lc.indexOf('>',next_tag)
+				s+=work.substring(ind,temp+1);
+				ind=temp+1;
+			}
+			else {
+				s+=replace(work.substring(ind,next_tag));
+				ind=next_tag
+			}
+		}
+		
+		element.innerHTML=s;
+	}
+	
 	for (var i = 0; i < opts.highlightTerms.length; i++) { //Each highlight term
 		if(opts.highlightTerms[i]) {
 			if(!opts.highlightRegexEnable){
-				if(el.innerText.toString().toLowerCase().includes(opts.highlightTerms[i].toLowerCase())) //match normally
-				el.innerHTML = '<span style="background-color:'+opts.highlightColor+'">'+el.innerHTML+'</span>' //encloseincludes
-				continue;
+				var innerTerms = opts.highlightTerms[i].split(" ")
+				for(var a in innerTerms){
+					highlightRecursor(el,escapeRegex(innerTerms[a]))
+				}
 			}
-			var rexp;
-			try{
-				rexp = new RegExp(opts.highlightTerms[i],"gmi")
-			} catch(e){
-				el.innerHTML+='<br/><span style="boldwarning"> Your highlight regex - '+opts.highlightTerms[i]+' - is malformed. Thrown exception: '+e+'</span>'
-				regexHasError = true;
-				return;
+			else {
+				try{
+					new RegExp(opts.highlightTerms[i],"gmi") // check to make sure the pattern wont cause issues
+				} catch(e){
+					el.innerHTML+='<br/><span style="color:#000;background-color:#FFFF00;" class="bold"> Your highlight regex pattern - '+opts.highlightTerms[i]+' - is malformed.<br/>Your highlights have been disabled until they are next edited<br/>Thrown exception: '+e+'</span>'
+					regexHasError = true;
+					return;
+				}
+				highlightRecursor(el,opts.highlightTerms[i])
 			}
-			el.innerHTML = el.innerHTML.replace(rexp,"<span style=\"background-color:"+opts.highlightColor+"\">$0</span>") //i cant figure out a proper, non snowflakey way to let people select the group that gets highlighted
 		}
 	}
 }