Выделите номер телефона и оберните тегом javascript

Question

Следующий код проверяет, имеет ли выбранный тег дочерние узлы. Если присутствует дочерний узел, он будет проходить до тех пор, пока не будет найден дочерний узел. Когда новых дочерних узлов не обнаружено, они контуров замыкаются, то есть достигает текстового узла, что приводит к завершению цикла. Функция выполняется рекурсивной для запуска до тех пор, пока не будет найден дочерний узел. Код работает в соответствии с приведенной выше информацией, но когда я пытаюсь сопоставить TEXT_NODE (console.log() выводит весь текстовый узел), replace() используется для идентификации номеров телефонов с использованием регулярных выражений и замены гиперссылкой. Число констатировано и заключен с гиперссылкой, но она будет отображаться в два раза, т.е. номер прилагается гиперссылкой и только number.Following это код

  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); 
     }); 

Ниже приведен скриншот выхода:

Здесь число печатается дважды вместо одного с гиперссылкой, которая была изображена (ожидается выделенный номер с гиперссылкой) и второй widout теги

Ниже приведен console.log из x

Я уже прошел через this.

Предлагаемое решение below хорошо работает с FF. Проблема возникает при использовании в IE11. Он выбрасывает Unknown runtime error и ссылается на .innerHTML. Я использовал appenChild(), но ошибка не была решена.

Answer 1

Наконец, я получил решение моего вопроса. Я упомянул об этом answer, который помог мне решить мой запрос.

Здесь идет код:

  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; 
      } 

     } 

Я надеюсь, что этот код помогает другим.

Answer 2

У вас есть пара проблем с тем, что вы опубликовали. Во-первых, если дочерний узел не является узлом типа 3, а не узлом SCRIPT, вы повторно вызываете recursivetree(), но вы не передаете дочерний элемент. Функция будет только начинаться с первого элемента div и снова бесконечно петля.

Во-вторых, вы вызываете replace() на самом узле, а не на innerHTML узла. Вы пытаетесь заменить узел на строку, которая просто не сработает, и я думаю, вы хотите заменить любые совпадающие числа внутри этого узла, а не весь узел.

Если у вас есть <div>My number is +111-555-9999</div>, вы хотите только заменить номер и не потерять все остальное.

Попробуйте это в качестве решения:

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/

Честно? Если вы пытаетесь пропустить всю страницу и заменить все экземпляры чисел, просто замените ее на теле.

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/