Homestuck Pesterlog Formatter

Automatically formats pesterlogs to work with ArchiveOfOurOwn Homestuck workskin.

by CaelestisInteritum

HTML

<body onload="init()">
  <!--Pesterer dropdown box-->
  <select id="pesterer"></select>
  began pestering
  <!--Pesteree dropdown box-->
  <select id="pesteree"></select>
  <br />
  <textarea id="inField" rows="12" cols="75" onclick="initInput(this)">Input (Separate speakers with a blank line)</textarea>
  <br /> Conversation stopped by
  <select id="stoppedBy">
    <option id="pestererStop" value="-1">---</option>
    <option id="pestereeStop" value="-1">---</option>
  </select>
  <br />
  <br />
  <button onclick="colorText()">Submit</button>
  <br />
  <br />
  <textarea id="outField" rows="12" cols="75" readonly>Output</textarea>
  <!--Preview field for processed pesterlog-->
  <p id="prevBox"></p>
</body>

CSS

.centered {
  text-align: center;
}

.italics {
  font-style: italic;
}

.right {
  text-align: right;
}

.block {
  width: 650px;
  margin-left: auto;
  margin-right: auto;
  background: #eee;
  border: 1px dashed gray;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 35px;
  padding-right: 35px;
}

.black,
.pesterlog {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #000000;
}

.white {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #ffffff;
}

.aradia {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #a10000;
}

.AR,
.dave,
.ARquiusprite {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #e00707;
}

.athblue {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #0000ff;
}

.athred,
.kankri,
.altkarkat {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #ff0000;
}

.bro,
.davesprite,
.dirk {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #f2a400;
}

.dad,
.pipefan413 {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #4b4b4b;
}

.equius,
.horuss {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #000056;
}

.eridan,
.cronus {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #6a006a;
}

.exile {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #ffffff;
  background-color: #000000;
}

.feferi,
.meenah {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #77003c;
}

.gamzee,
.kurloz {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #2b0057;
}

.jade,
.erisolsprite {
  font-size: 14px;
  font-weight: bold;
  font-family: courier, monospace;
  color: #4ac925;
}

.jadesprite,
.jake {
  font-size: 14px;
 ...

JavaScript

//Initialize body
function init() {
  //Define character selection list
  var charSelectList = "<option value=\"-1\"> --- </option> <option value=\"-1\"> ---Beta Kids--- </option> <option value=\"0\"> ectoBiologist [EB](John) </option> <option value=\"1\"> ghostlyTrickster [GT](John) </option> <option value=\"2\"> turntechGodhead [TG](Dave) </option> <option value=\"3\"> tentacleTherapist [TT](Rose) </option> <option value=\"4\"> gardenGnostic [GG](Jade) </option> <option value=\"-1\"> ---Alpha Kids--- </option> <option value=\"5\"> golgothasTerror [GT](Jake) </option> <option value=\"6\"> timaeusTestified [TT](Jake) </option> <option value=\"7\"> gutsyGumshoe [GG](Jane) </option> <option value=\"8\"> tipsyGnostalgic [TG](Roxy) </option> <option value=\"-1\"> ---Trolls--- </option> <option value=\"9\"> apocalypseArisen [AA](Aradia) </option> <option value=\"10\"> adiosToreador [AT](Tavros) </option> <option value=\"11\"> twinArmageddons [TA](Sollux) </option> <option value=\"12\"> carcinoGeneticist [CG](Karkat) </option> <option value=\"13\"> arsenicCatnip [AC](Nepeta) </option> <option value=\"14\"> grimAuxillatrix [GA](Kanaya) </option> <option value=\"15\"> gallowsCalibrator [GC](Terezi) </option> <option value=\"16\"> arachnidsGrip [AG](Vriska) </option> <option value=\"17\"> terminallyCapricious [TC](Gamzee) </option> <option value=\"18\"> centaursTesticle [CT](Equius) </option> <option value=\"19\"> caligulasAquarium [CA](Eridan) </option> <option value=\"20\"> cuttlefishCuller [CC](Feferi) </option> <option value=\"-1\"> ---Cherubs--- </option> <option value=\"21\"> uranianUmbra [UU](Calliope) </option> <option value=\"22\"> undyingUmbrage [uu](Caliborn grey) </option> <option value=\"23\"> undyingUmbrage [uu](Caliborn green) </option> <option value=\"-1\"> ---Other Characters--- </option> <option value=\"24\"> turntechGodhead [TG](Davesprite) </option> <option value=\"25\"> timaeusTestified [TT](AR/Lil Hal) </option> <option value=\"26\"> )(er Imperious...