Calculate HEX color based on string

by Sascha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <div id="test">
      <div>App.SR_Basic.fbProcedure.hmi_xAbortingActive </div>
      <div>App.SR_CompressedAirHeater.fbHeater.fbBargraph.ActualValue</div>
      <div>Process - FOP - Processing Active</div>
      <div>Process - CIP - Processing Active</div>
      <div>Process - COP - Processing Active</div>

      <div>Some other text</div>
      <div>Exception.10500.Alarm</div>
      <div>Exception.10501.Alarm</div>
      <div>Exception.10510.Alarm</div>
      <div>App.SR_Basic.fbProcedure.hmi_xAbortingActive </div>
      <div>App.SR_CompressedAirHeater.fbHeater.fbBargraph.ActualValue</div>
      <div>Exception - others</div>
      <div>Exception.10500.Alarm</div>
      <div>Exception.50100.Alarm</div>
    </div>
<hr>
    <div id="test2">
      <div>App.SR_Basic.fbProcedure.hmi_xAbortingActive </div>
      <div>App.SR_CompressedAirHeater.fbHeater.fbBargraph.ActualValue</div>
      <div>Process - FOP - Processing Active</div>
      <div>Process - CIP - Processing Active</div>
      <div>Process - COP - Processing Active</div>

      <div>Some other text</div>
      <div>Exception.10500.Alarm</div>
      <div>Exception.10501.Alarm</div>
      <div>Exception.10510.Alarm</div>
      <div>App.SR_Basic.fbProcedure.hmi_xAbortingActive </div>
      <div>App.SR_CompressedAirHeater.fbHeater.fbBargraph.ActualValue</div>
      <div>Exception - others</div>
      <div>Exception.10500.Alarm</div>
      <div>Exception.50100.Alarm</div>
    </div>

CSS

body {
  font-family: 'Open Sans', sans-serif;
}
div div {
  border: 1px solid black;
  padding: 5px;
  margin: 3px;
}
.red {
  background: red;
}

JavaScript

Moonbird = window.Moonbird || {};
Moonbird.Component = Moonbird.Component || {};

Moonbird.Component.ColorCalculator = function() {
  let self = {};
  self.registeredColors = [];

  let highlightString = null;

  let toHex = function(d) {
    return ("0" + (Number(d).toString(16))).slice(-2).toUpperCase()
  };

  self.registerStringToHighlight = function(string) {
    highlightString = string;
  }

  self.generate = function(string, suffix) {

    let isHighlight = highlightString && string.indexOf(highlightString) === 0;

    // check if the string already has an assigned color:
    let colorCheck = self.registeredColors.filter(function(x) {
      return x.Name === string;
    });
    if (colorCheck.length && colorCheck[0].Name) {
      return colorCheck[0].Color;
    }

    if (!suffix) {
      suffix = '';
    }
    let combinedString = string + suffix;
    const chunkSize = Math.ceil(combinedString.length / 3);
    let colorString = '#';
    for (let i = 0; i < combinedString.length; i += chunkSize) {

      const chunk = combinedString.slice(i, i + chunkSize);
      let sum = 0;
      for (let j = 0; j < chunk.length; j++) {
        sum += chunk.charCodeAt(j) * j * i;
      }

      // generate the color parts, with a range of 10-246 to avoid pure black and white, handle exeptions specially by toning to red:
      if (i === 0) {
        if (isHighlight) {
          colorString += toHex(255);
        } else {
          colorString += toHex(Math.floor(sum % 127) + 10);
        }
      } else {
        colorString += toHex(Math.floor(sum % 236) + 10);
      }
    }

    let checkColor = self.registeredColors.filter(function(x) {
      return x.Color === colorString;
    });
    // check if the some color was used before; if so, generate a new color:
    if (checkColor.length > 0 && checkColor[0].Name !== string) {
      colorString = self.generate(string, suffix += '.');
    } else {
      self.registeredColors.push({
        Name: string,
        Color:...