JSFiddle - React, Tailwind, and code Playground

HTML

<div>
Markup is aozora bunko formatting except ｜ is mandatory.
</div>

<textarea id=input rows=10 cols=80>自己修復：武具｜自身《じしん》の破損を自動的に｜修復《しゅうふく》する。</textarea>
<br>
<textarea id=output rows=10 cols=80 readonly>

</textarea>
<div id=example>

</div>

JavaScript

"use strict";

function process(e)
{
		console.log("running");
		let input = document.getElementById("input");
    let output = document.getElementById("output");
    let example = document.getElementById("example");
    output.readOnly = false;
    
    output.textContent = "";
    let chars = input.value.split('');
    console.log(chars)
    let mode = 0;
    let hold_text_base = "";
    let hold_text_ruby = "";
    for(let i = 0; i < chars.length; i++)
    {
    		let c = chars[i];
        if(c == '"') c = "&quot;";
        if(c == '&') c = "&amp";
        if(c == '<') c = "&lt";
        if(c == '>') c = "&gt";
    		if(mode == 0)
        {
        		if(c == '｜')
            		mode = 1;
            else
    						output.textContent += c;
        }
        else if(mode == 1)
        {
        		if(c == '《')
            {
            		mode = 2;
            }
            else
            		hold_text_base += c;
        }
        else if(mode == 2)
        {
        		if(c == '》')
            {
            		output.textContent += "<ruby><rb>"
            		output.textContent += hold_text_base;
            		output.textContent += "</rb><rp>（</rp><rt>";
            		output.textContent += hold_text_ruby;
            		output.textContent += "</rt><rp>）</rp></ruby>"
                hold_text_base = "";
                hold_text_ruby = "";
            		mode = 0;
            }
            else
            		hold_text_ruby += c;
        }
    }
    if(mode != 0)
    {
        output.textContent += "<ruby><rb>"
        output.textContent += hold_text_base;
        output.textContent += "</rb><rp>（</rp><rt>";
        output.textContent += hold_text_ruby;
        output.textContent += "</rt><rp>）</rp></ruby>"
        hold_text_base = "";
        hold_text_ruby = "";
        mode = 0;
    }
    output.readOnly = true;
    example.innerHTML = output.value;
}
document.getElementById("input").addEventListener("input", process);

process();