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

You've got a couple of problems with what you posted. First, if a child is not node type 3 and not a SCRIPT node, you re-call recursivetree() but you do not pass the child in. The function will just start over at the first div element and again, infinitely loop.

Second, you're calling replace() on the node itself, and not the node's innerHTML. You're trying to replace a node with a string, which just won't work, and I think you mean to replace any matching numbers within that node, rather than the entire node.

If you have <div>My number is +111-555-9999</div>, you only want to replace the number and not lose everything else.

Try this as a solution:

function recursivetree(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:;\">$&</a>";
   var obj = obj || document.getElementsByTagName('div')[0];
   if(obj.hasChildNodes()){
       var child = obj.firstChild;
       while(child){
           if(child.nodeType !== 3 && child.nodeName !== 'SCRIPT'){
                  //Recall recursivetree with the child 
                  recursivetree(child);
           }

           //A nodeType of 3, text nodes, sometimes do not have innerHTML to replace
           //Check if the child has innerHTML and replace with the regex
           if (child.innerHTML !== undefined) {
                child.innerHTML = child.innerHTML.replace(regex,y);
           }
           child=child.nextSibling;
       }
   }
}
recursivetree();

Fiddle: http://jsfiddle.net/q07n5mz7/

Honestly? If you're trying to loop through the entire page and replace all instances of numbers, just do a replace on the body.

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:;\">$&</a>";
var body = document.body;
body.innerHTML = body.innerHTML.replace(regex, y);

Fiddle: http://jsfiddle.net/hmdv7adu/

Answer 2

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.