Highlight phone number and wrap with tag javascript

Question

The following code checks if the selected tag has childnodes. If a child node is present , it loops till a child node is found. When there are no further child nodes found, it loops out i.e it reaches a text node causing the loop to end. The function is made recursive to run until no child node is found. The code runs as per above info, but when I try to match TEXT_NODE (console.log() outputs all text node), replace() is used to identify phone numbers using regex and replaced with hyperlink. The number gets detected and is enclosed with a hyperlink but it gets displayed twice i.e. number enclosed with hyperlink and only the number.Following is the code

            function DOMwalker(obj){
            var regex = /\+\d{1,4}?[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}/g;
             var y = "<a href=\"javascript:void(0);\">$&</a>";
            if(obj.hasChildNodes()){
                var child = obj.firstChild;

                while(child){
                    if(child.nodeType!==3)
                    {
                        DOMwalker(child);
                    }
                    if (child.nodeType=== 3) {
                            var text = child.nodeValue;
                             console.log(typeof text);                            
                            var regs = regex.exec(text);

                            match = text.replace(regex,y);

                            if(match){

                                var item = document.createElement('a');
                                item.setAttribute('href','javascript:void(0);');
                                var detect = document.createTextNode(match);
                                var x=item.appendChild(detect);
                                console.log(x);
                               child.parentNode.insertBefore(x,child);
                           }
                     }

                     child=child.nextSibling;
                }
            }
        };
        $(window).load(function(){
            var tag = document.querySelector(".gcdMainDiv div.contentDiv");

            DOMwalker(tag);
        });

Following are the screenshot of the output:

Here the number gets printed twice instead of one with hyperlink which is been displayed(expected highlighted number with hyperlink) and second widout tags

Following is console.log of x

I have already gone through this.

The solution provided below works well with FF. The problem arises when used in IE11. It throws Unknown runtime error and references the .innerHTML. I used the appenChild(),but the error couldn't be resolved.

Answer 1

Finally, I got the solution of my question. I referred to this answer which helped me to solve my query.

Here goes the code:

            function DOMwalker(obj){
            if(obj.hasChildNodes()){
                var child = obj.firstChild;
                var children = obj.childNodes;
                var length = children.length;
                for(var i = 0;i<length;i++){
                    var nodes = children[i];
                    if(nodes.nodeType !==3){
                        DOMwalker(nodes);
                    }
                    if(nodes.nodeType===3){
                        //Pass the parameters nodes:current node being traversed;obj:selector being passed as parameter for DOMwalker function 
                        highlight(nodes,obj);
                    }
                }
                child = child.nextSibling;
            }
        }
        function highlight(node,parent){
            var regex =/(\d{1}-\d{1,4}-\d{1,5})|(\+\d{1,4}?[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9})/g;
            //Stores the value of current node which is passed through the if loop
            var matchs = node.data.match(regex);
            if matchs is true,add it to DOM
            if(matchs){
                var anchor = document.createElement("a");
                var y = /[(]\d[)]|[.-\s]/g;//removes spaces periods or dash,also number within brackets
                var remove = number.replace(y,'');
                //tel uri,if you have an app like skype for click-to dial
                anchor.setAttribute("href","tel:"+remove);
                //the anchor tag should be inserted before in the current node in the DOM
                parent.insertBefore(anchor,node);
                //append it toh the DOM to be displaye don the web page
                anchor.appendChild(node);

            }
            else
            {
                return false;
            }

        }

I hope this code helps others.