index.html

<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/1.0.29/encoding.min.js"></script>
  <style>
    body {
      background-color: #280000;
      color: #FFCC33;
      line-height: 2.0;
      white-space: pre-line;
      margin: 20px;
      overflow: auto;
      margin: 40px auto;
      max-width: 800px;
      padding: 0 10px;
    }
    img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
    }
    .furigana {
      color: white;
      direction: rtl;
      display: inline-block;
      font-size: .5em;
      margin-top: -1em;
      user-select: none;
      vertical-align: top;
      white-space: nowrap;
      width: 0;
    }
  </style>
</head>

<body>
  <input type="file" id="file" />

  <h1 id="fileName"></h1>
  <div id="fileContents"></div>

  <script type="text/javascript">
    const render = (fileName, fileContents) => {
      fileContents = fileContents
        .replace(/［＃\（(.*?.jpg)\）入る］/g, "<img src='$1' title='$1'>") // Insert <img src="..." >
        .replace(/［＃改ページ］/g, "<hr></hr>") // Draw a white line for page changes
        .replace(/《(.*?)》/g, "<span class='furigana'>$1</span>"); // Wrap furigana
      document.getElementById('fileName').innerHTML = fileName;
      document.getElementById('fileContents').innerHTML = fileContents;
    };

    document.getElementById('file').addEventListener('change', (event) => {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        let fileContents = new Uint8Array(e.target.result);
        fileContents = Encoding.convert(fileContents,
          {
            to: 'unicode',
            from: Encoding.detect(fileContents),
            type: 'string'
          }
        );
        // Remember the opened file
        localStorage.setItem('fileName', file.name);
        localStorage.setItem('fileContents', fileContents);
        // Render the new file
        render(file.name, fileContents);
      };
      reader.readAsArrayBuffer(file);
    }, false);

    if (localStorage.getItem('fileName')) {
      // If opened a file before, render it
      render(localStorage.getItem('fileName'), localStorage.getItem('fileContents'));
    }
  </script>
</body>

</html>