JS把每个文字拆为独立的div

<h1 class="mod modTit mod-1670960919" style="width: 100%; position: relative; margin: 50px auto 20px">
  
   <style type="text/css">
    .mod-1670960919 .textToDiv > div {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid rgba(var(--modRgb), 0.6);
      margin: 0.2em !important;
      padding: 0.5em;
      border-radius: 100%;
      box-shadow: 0 0 0.3em rgba(var(--modRgb), 1);
      background: rgba(var(--modRgb), 0.06);
      width: 2em;
      height: 2em;
    }
  </style>

  <section class="tit" style="text-align: center; color: rgba(var(--modRgb), 1)">
    <p class="textToDiv" style="margin: 0; padding: 0; font-size: 21px; display: flex; flex-wrap: wrap; justify-content: center;">替换文字</p>
  </section>

  <script type="text/javascript">
    var TextToDiv = {
      init: function (e) {
        var t = document.querySelector(e),
          n = t.innerHTML;
        t.innerHTML = "";
        for (var i = 0; i < n.length; i++) {
          var o = n[i],
            r = document.createElement("div"),
            d = document.createTextNode(o);
          r.appendChild(d), t.appendChild(r);
        }
      }
    };
    TextToDiv.init(".mod-1670960919 .textToDiv");
  </script>

 </h1>