regexWordHighlight.js

(() => {
  const localTimeLine = document.getElementsByClassName('item-list')[0]
  const colorCode = '#8BEAC7'

  const escapeHTML = (string) => {
    return string
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/'/g, '&#x27;')
      .replace(/`/g, '&#x60;')
      .replace(/"/g, '&quot;')
  }

  const classname = 'status__content status__content--with-action'

  const onMutation = (mutation) => {
    mutation.map((dom) => handleNodeList(dom.addedNodes))
  }
  const observer = new MutationObserver(onMutation)
  const configure = {
    childList: true
  }

  const handleNodeList = (nodelist) => {
    for (const node of nodelist) {
      const status = node.getElementsByClassName(classname)[0]
      // <>などは非対応
      const mute = /[うぅ][ゅゆ]/
      const match = mute.exec(node.innerText)
      if (match) {
        const replaceWith = `<font color="${colorCode}">${escapeHTML(match[0])}</font>`
        node.innerHTML = node.innerHTML.replace(mute, replaceWith)
      }
    }
  }

  observer.observe(localTimeLine, configure)
})()