JSFiddle - React, Tailwind, and code Playground

by Christopher Stephens

HTML

<div class="someBlockIWantToConvert">
    
    <div>hey</div>
    <a href="tel:123456789">1234556789</a>
    <div>123456789</div>
</div>

JavaScript

var discoverAndLinkData = (function(){
  var discoverAndLinkData = function (plainTextString) {
    //International phone numbers are incredibly varied.  This is designed to pick up numbers in many regions.
    var phoneRegEX = /(\+\s?)?(\(\d{3}\)\s?)?((\d)([-.\s\\\/])?)+\b/g;
    var httpRegEX = /\bhttp{1}s?:\/\/([-A-Z0-9+&@#\/%?=~_|!:,.;]*)+\b/gi;
    var emailRegEX = /\b([A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4})\b/gi;
      
    plainTextString = plainTextString.replace(phoneRegEX, function(match,content) {
      // For my needs I only really needed to support cell phone calls within the US and UK
      // The UK has some very interesting rules and segmenting for calls. Like in the US 
      // depending on the local provider you can have very short numbers. The 6 digit cut off was 
      // chosen from empirical evidence that most numbers on the web do not assume the callers 
      // local region they will give a number that works from outside their area.
      if (match.replace(/\D/g, "").length >= 6) {
           return "<a href='tel://" + match + "'>" + match + "</a>";
      }
      return match;
    });

    //TODO between each match exclude that text from matching again.
    plainTextString = plainTextString.replace(emailRegEX, function(match, content) {
      return "<a href='mailto:" + match + "'>" + match + "</a>";
    });
              
    plainTextString = plainTextString.replace(httpRegEX, function(match, content) {
      return "<a href='" + match + "'>" + match + "</a>";
    });
      
    return plainTextString;
  }

  // This was adapted from some
  function traverseTextNodes(node, callback) {
    var next;
    if (node.nodeType === 1) {
        // (Element node)
        if (node = node.firstChild) {
            do {
              // Recursively call traverseChildNodes
              // on each child node
              next = node.nextSibling;
              traverseTextNodes(node, callback);      
            } while(node = next);
          }
  ...