JSFiddle - React, Tailwind, and code Playground

by ttquang1063750

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <textarea id="textField" cols="30" rows="10">
  {
  "tag_service" :         "http://localhost:9030/",
  "geocoder_service" :    "http://localhost:9090/",
  "auth_service" :        "http://localhost:9010/",
  "data_service" :        "http://localhost:10000/data/",
  "aem_service" :         "http://localhost:9080/aem/",
  "conf_service" :        "http://localhost:9060/",
  "robots_web_service" :  "http://localhost:9050/",
  "alerting_service" :    "http://localhost:9100/alerting/",
  "api_service" :         "http://localhost:9070/",
  "api_service2" :        "http://localhost:8082/",
  "api_service3" :        "http://localhost:8082/",
  "api" :                 "http://localhost:8084/",
  "netflow_dispatcher" :  "http://localhost:9040/netflowdispatcher/",
  "flows_service" :       "http://localhost:10010/flows/"
}

  </textarea>
  <script>
   let textField = document.getElementById('textField');
   let pattern = /(?:(?<=")(.*?)(?="\s*?:)).*(?:(?<=")(.*?)(?="))/gm;
   let value = textField.value;
   let div = document.createElement('DIV');
   value = value.replace(pattern, "<a href=\"$2\">$1</a>\n");
   console.log(value);
   div.innerHTML = value;
   document.body.append(div);
  </script>
</body>
</html>