HTMLs/Tokenizer/index.html

<!DOCTYPE html>
<html lang="zh_CN">
    <head>
        <meta charset="UTF-8" />
        <title>Tokenizer 分词器</title>
        <meta name="description" content="利用建-值对应字典进行组合、处理文本序列、查询单词" />
        <script defer src="triedata.js"></script>
        <script defer src="Tokenizer.js"></script>
        <style>
        .recognized { text-rendering: optimizeLegibility; }
        .abbr-expand { color: forestgreen; }
        .config-panel { border: 2px solid green; }
        #text { width: -moz-available; height: 300px; }
        </style>
    </head>
    <body>
        <details class="config-panel">
            <summary>词库配置</summary>
            <textarea id="text" placeholder="输入要处理的文本"></textarea>
            <div>
                字号：<input id="slider-fontsize" type="range"></input>
                词库：<select id="select-mode"></select>
                显示：<select id="select-display">
                    <option>上标(Ruby notation)</option>
                    <option>翻转上标</option>
                    <option>粗体+后括号</option>
                    <option>标记已识别</option>
                    <option>替换已识别</option>
                    <option>添加释义</option>
                    <option>自定义HTML…</option>
                </select>
                <div>
                    <button id="do-generate">生成</button>或
                    <button id="do-showDict">显示词库</button>
                    <button id="do-showTrie">显示词库字典树</button>，
                    <button id="do-readDict">添加键-值到词库</button>
                    <button id="do-reverse">反转当前词库</button>
                </div>
            </div>
            <textarea id="text-word" placeholder="输入要查询的单词前缀，立即取得对应义/表"></textarea>：<abbr id="abb-word" title="它是这个意思"></abbr>
            <ul id="list-possibleWord"></ul>
        </details>
        <section><pre><div id="output">
你好世界！请展开上方输入文本，生成。<br>
关于 <abbr title="类似 ?日语=jp.txt+jp_汉字.txt&日到拼音=jp.txt>pinyin.txt ，切分以 Dict(&name=) - Trie(+) - TriePipe(>) (~逆向)，此外 mode 和 text, font-size=Npt 参数可用">URL 参数格式</abbr>
和 <abbr title="渲染法默认内建了 HTML5 Ruby 上标和粗体+括号内译文，选后者时树嵌套结构会以花括号形式输出，另外！输出后不处理有\r\n符前缀的项（包括换行自动兼容）。">字典树显示方式</abbr>

<details><summary>如果你想了解更多关于 <abbr title="全局资源地址，就是浏览器顶上的链接">URL</abbr> 参数（<code>&name=value</code>）的事情</summary><dl>
    <dt>delim0/delim1</dt>
    <dd>指示后方加载字典表的 <b>键值对/键-值</b> 切分符，这可用于兼容 换行/= 外的格式</dd>
    <dt>conf</dt>
    <dd>加载符合 ?k=v 或 &k=v 格式的参数表，参数表内亦可用此参数另再加载</dd>
    <dt>feat</dt>
    <dd>等于自动点击文档的第 N 个(从0数)附加特性按钮</dd>
    <dt>inword-grep</dt>
    <dd>设置为 c=re=subst 的格式，在某单词的前缀匹配中如正处理 c 则以 re 匹配替换在解析内容。
如果置换为 c 则优化为跳过匹配、为 %00 则不分词匹配，注意只有单词前缀匹配才替换！</dd>
    <dt>text</dt><dd>拼接<b>主内容</b>，可以 ':' 起始引用链接</dd>
    <dt>mode</dt><dd>使用<b>词典名</b>，无效则变动到首项</dd>
    <dt>font-size</dt><dd>渲染结果字体大小，比如 50px, 25pt</dd>
    <dt>style</dt>
    <dd>加载另外的 <abbr title="层叠样式表">CSS</abbr> 样式链接(':' 起始)，或者直接的文本</dd>
    <dt><var>name</var></dt><dd>创建名叫 <var>name</var> 的字典，其参数可以用 (a+b) (a>>b) (a>b) (~a)
即 以b之值优先-合并、以b分词替换a的所有值、以b解释a的所有值、反向化a 的形式组合。
默认是链接，加 ':' 引用已加载字典；你可以覆盖之前的字典名</dd>
</dl></details>

虚下划线的东西看不了？<button>启用点击展开</button>
感觉自己看懂了比较牛逼？<button>添加用来添加参数的按钮</button>
字典内建的(>) 二层映射甚至连 (>>) 『按值分词替换』操作都<abbr title="注意，它对添加释义模式无效">不够用</abbr>？<button>启用二次分词功能</button>

<details>
    <summary>问答：按值分词替换和二次分词有什么区别</summary>
一般而言字典都是针对两种语言(如平假-罗马字)替换的，所以在要增添对应第三种语言(如中文)时用(+)号，达到 <i>平假->罗马字->汉字</i> 时二重分词没问题。
可是，如果是在替换方言，语言间的符号有大量重叠，此时用(+)号就容易导致覆盖，可以直接叠改替换 (a>>b>>c) 里字典 a 的所有值。
</details>
        </div></pre></section> <!-- 没必要加 pre 因为咱自动处理 CRLF 换行跨平台（划掉），不还是可以加 -->
    </body>
</html>