highliter

addHighlightText:function(component, event, helper, str){
       var className = "highlightText"
       /*if(str){
           var regex = str.split(' ');
          regex = regex.filter(function(char){
            return char !== '';
          });
           regex = regex.join('|');
           regex = regex.replace(/[-[\]{}()*+?.,\\^$]/g, "\\$&");
           var matcher = new RegExp(regex, 'gi');
                console.log($( ".contextHighlight").contents().filter(function() {
                    return this.nodeType === 3 && matcher.test(this.nodeValue);
                }))
               
        	$( ".contextHighlight").contents().filter(function() {
                    return this.nodeType === 3 && matcher.test(this.nodeValue);
                }).replaceWith(function() {
                var self=this
                return (this.nodeValue || "").replace(matcher, function(match) {
                    console.log('this.nodeValue', self.nodeValue)
                    return "<span class=\"" + className + "\">" + match + "</span>";
                });
           })        
       }*/
		 
        let main = document.querySelectorAll('.contextHighlight')
        main.forEach(function(item){
            let text = item.innerHTML
           var className = "highlightText"
          var regex = str.split(' ');
          regex = regex.filter(function(char){
            return char !== '';
          });
          regex = regex.join('|');
          regex = regex.replace(/[-[\]{}()*+?.,\\^$]/g, "\\$&");
          var matcher = new RegExp(regex, 'gi');
        
          var result =  text.replace(matcher, function wrapper (match) {
  					return "<span class='highlightText'>" + match + "</span>"
			})
          item.innerHTML = result
        })
    },
    removeHighlightText:function(component, event, helper){
        $('.highlightText').replaceWith(function(a, b) {return b });
    },