Simple text markup function

markupText.js

/**
 * Simple text markup function
 * @param {string} selector - CSS selector
 * @param {string} chars - Character class pattern
 * @param {string|Object|Function} processor - Class name, attributes object, or custom function
 */
const markupText = (selector, chars, processor) => {
  const regex = new RegExp(`[${chars}][${chars}\\s]*[${chars}]?`, 'g')

  let process
  if (typeof processor === 'string') {
    process = () => ({ tag: 'span', class: processor, lang: 'en' })
  } else if (typeof processor === 'function') {
    process = processor
  } else {
    process = () => ({ tag: 'span', ...processor })
  }

  document.querySelectorAll(selector).forEach((el) => {
    el.childNodes.forEach((node) => {
      if (node.nodeType === 3) {
        const html = node.textContent.replace(regex, (match) => {
          if (/^\d+$/.test(match)) return match

          const result = process(match)
          const { tag = 'span', ...attrs } = result.attributes || result
          const attrStr = Object.entries(attrs)
            .map(([k, v]) => ` ${k}="${v}"`)
            .join('')

          return `<${tag}${attrStr}>${match}</${tag}>`
        })

        if (html !== node.textContent) {
          const temp = document.createElement('div')
          temp.innerHTML = html
          node.replaceWith(...temp.childNodes)
        }
      }
    })
  })
}