Why does using replaceAll instead of replace give me bad results?

Question

I'm still working on my IDE and I keep running into problems and I'm wondering if I just keep doing something wrong this is the sample of code that I need help with

function updatesrcnow(){
document.getElementById("editordiv").innerHTML = document.getElementById("editordiv").innerHTML.replaceAll("pubvar()","<mathcode>pubvar()</mathcode>").replaceAll("math.","<mathcode>math.</mathcode>").replaceAll(".random","<mathcode>.random</mathcode>").replaceAll("+","<mathcode>+</mathcode>").replaceAll("-","<mathcode>-</mathcode>").replaceAll("/","<mathcode>/</mathcode>").replaceAll("*","<mathcode>*</mathcode>").replaceAll(".percent","<mathcode>.percent</mathcode>").replaceAll("1","<mathcode>1</mathcode>").replaceAll("2","<mathcode>2</mathcode>").replaceAll("3","<mathcode>3</mathcode>").replaceAll("4","<mathcode>4</mathcode>").replaceAll("5","<mathcode>5</mathcode>").replaceAll("6","<mathcode>6</mathcode>").replaceAll("7","<mathcode>7</mathcode>").replaceAll("8","<mathcode>8</mathcode>").replaceAll("9","<mathcode>9</mathcode>").replaceAll("0","<mathcode>0</mathcode>");
document.getElementById("editordiv").innerHTML = document.getElementById("editordiv").innerHTML.replaceAll("select()","<objcode>select()</objcode>").replaceAll("getobjid()","<objcode>getobjid()</objcode>").replaceAll("objectRun()","<objcode>objectRun()</objcode>").replaceAll("create()","<objcode>create()</objcode>").replaceAll("destroy()","<objcode>destroy()</objcode>").replaceAll("transform","<triggercode>transform</triggercode>").replaceAll(".object","<objcode>.object</objcode>").replaceAll(".Translate","<objcode>.Translate</objcode>").replaceAll(".v2","<objcode>.v2</objcode>").replaceAll(".change()","<mathcode>.change()</mathcode>").replaceAll(".height","<objcode>.height</objcode>").replaceAll(".width","<objcode>.width</objcode>").replaceAll(".design","<objcode>.design</objcode>");
document.getElementById("editordiv").innerHTML = document.getElementById("editordiv").innerHTML.replaceAll("using.","<triggercode>using.</triggercode>").replaceAll("world.","<triggercode>world.</triggercode>");

}

  #editordiv{
    background: black;
    color: white;
  }
  positioncode{
    color: #00c3ff;
}
  triggercode{
    color: #f0ad44;
  }
  punctcode{
    color: #c81305;
  }
  objcode{
    color: #00d839;
  }
  boolcode{
    color: #e3fe53;
  }
  mathcode{
    color: #ff0096;
  }
  cameracode{
    color: #bcbcbc;
  }

<link rel="alternate" type="application/json+oembed" href="/oembed.json" title="Rag3D - Home Of Ragolation"/>
<script src="/app-home/editor/ragstor.js"></script>
<div id="fileholder"></div> <div id="editordiv" contenteditable="true"></div>

I'm just wondering what I did wrong considering I don't see the problem is there a more sufficient way to do color code or am I just doing it wrong.