Wiki2html

※2019/03/17更新: Leptailurus servalLeptailurus servalさんのコード1をお借りしました。

乗り越えた難関(a.k.a. へっぽこ履歴):

  • 二重以上の引用符が使えない
  • 色・サイズ変更構文に対応できない
    • グループ化の魔力が不可能を可能に
  • 置換用グループの誤用(もっと早く気付いていれば…)
    • before: (.+)
      after: (.*?)
  • URL内の//をイタリック体変更構文と誤認してしまう
    • .split(/(https?:\/\/)/)と配列のコンボで解決!

対応中のコード(追加順)

  1. **aaa**
  2. //aaa//
  3. --aaa--
  4. __aaa__
  5. div, span
  6. [[=]], [[>]], [[<]]
  7. "> "
  8. [[code]]
  9. ##<color>|aaa##
  10. [[size <font-size>]]aaa[[/size]]
  11. [<url> <title>]
  12. [[[<pagename>|<title>]]]
  13. ^^aaa^^
  14. ,,aaa,,

使用できないコード

  1. [[footnote]]
  2. [[module ...]]
  3. [[tab ...]]
  4. [[bibliography]]
  5. [[iftags ...]]
  6. [[include ...]]
  7. [[date ...]]
<head></head>
<body style="margin: 0; padding: 0;">
<form>
<input type="button" value="reset" onclick="reset()"><input type="button" value="copy html code" onclick="copyHtml()">
<!--<input type="checkbox" id="u-col"><span style="font-size: 13px; text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff;">use collapsible</span>-->
<textarea id="wiki" placeholder="insert wiki-text" oninput="wiki2html()" rows="10" style="width: 99%;"></textarea>
<textarea id="html" rows="10" style="width: 99%;" placeholder="リンク(URL)とイタリックの併用が可能になりました!" readonly></textarea>
<script src="/local--code/wiki2html/2"></script>
</body>
/*
 * Wiki2html
 * Author: 7happy7
 * Special thanks: Leptailurus serval
 * CC BY-SA 3.0
 */
let wiki = document.getElementById("wiki");
let html = document.getElementById("html");
/* let uCol = document.getElementById("u-col"); */
let htmlCode, i, ital, bqPlusI;
let attention = ["footnote", "module", "tabview", "tab", "bibliography", "iftags", "include", "date"];
htmlCode = "";
 
/*
result();
uCol.addEventListener('change', function() {
    result();
}, false);
 */
 
function wiki2html() {
    base();
    result();
};
 
function base() {
    htmlCode = wiki.value + "\n";
 
        /* <br> */
    htmlCode = htmlCode.replace(/\n/g, "<br>\n");
 
        /* link: [url name] */
    htmlCode = htmlCode.replace(/\[\*((https?:\/\/|\.*\/)[!-~]+) (.*?)\]/g, '<a href="$1" target="_blank">$3</a>');
    htmlCode = htmlCode.replace(/\[((https?:\/\/|\.*\/)[!-~]+) (.*?)\]/g, '<a href="$1" target="_parent">$3</a>');
 
        /* link: [[[url|name]]] */
    htmlCode = htmlCode.replace(/\[\[\[\*([!-~]+)\|(.*?)\]\]\]/g, '<a href="/$1" target="_blank">$2</a>');
    htmlCode = htmlCode.replace(/\[\[\[([!-~]+)\|(.*?)\]\]\]/g, '<a href="$1" target="_parent">$2</a>');
 
        /* <strong> */
    htmlCode = htmlCode.replace(/[\*]{2}(.*?)[\*]{2}/g, "<strong>$1</strong>");
 
        /* <i> */
    ital = [];
    for(i = 0;i < htmlCode.split(/(https?:\/\/)/).length;i++){
        ital.push(htmlCode.split(/(https?:\/\/)/)[i].replace(/[\/]{2}(.*?)[\/]{2}/g, "<i>$1</i>"));
    }
    htmlCode = ital.join("");
 
        /* <span style="text-decoration: line-through;"> */
    htmlCode = htmlCode.replace(/[\-]{2}(.*?)[\-]{2}/g, '<span style="text-decoration: line-through;">$1</span>');
 
        /* <span style="text-decoration: underline;"> */
    htmlCode = htmlCode.replace(/[\_]{2}(.*?)[\_]{2}/g, '<span style="text-decoration: underline;">$1</span>');
 
        /* <sup> */
    htmlCode = htmlCode.replace(/[\^]{2}(.*?)[\^]{2}/g, '<sup>$1</sup>');
 
        /* <sub> */
    htmlCode = htmlCode.replace(/[,]{2}(.*?)[,]{2}/g, '<sub>$1</sub>');
 
        /* [[]] to <> */
    htmlCode = htmlCode.split("[[").join("<").split("]]").join(">").replace(/span[\\_]/g, "span").replace(/div[\\_]/g, "div");
 
        /* [[=]] [[>]] [[<]] */
    htmlCode = htmlCode.split("<=><br>").join('<div style="text-align: center;">').split("<br>\n</=>").join("\n</div>").split("<>><br>").join('<div style="text-align: right;">').split("<br>\n</>>").join("\n</div>").split("<<><br>").join('<div style="text-align: left;">').split("<br>\n</<>").join("\n</div>");
 
        /* code */
    htmlCode = htmlCode.replace(/^<code>/g, '<div class="code">\n<pre>').replace(/\n<\/code>/g, "\n</pre>\n</div>").replace(/<pre><br>/g, "<pre>").replace(/<br>\n<\/pre>/g, "\n</pre>");
 
        /* color */
    htmlCode = htmlCode.replace(/[#]{2}(.*?)\|(.*?)[#]{2}/g, '<span style="color: $1;">$2</span>');
 
        /* font-size */
    htmlCode = htmlCode.replace(/<size (.*?)>(.*?)<\/size>/g, '<span style="font-size: $1;">$2</span>');
 
        /* blockquote */
        /* 1 */
        for(i = 6;i > 0;i--){
            bqPlusI = new RegExp('^>' + '>'.repeat(i-1) + ' ', 'mg');
            htmlCode = htmlCode.split(bqPlusI).join("> ".repeat(i));
        }
        if (htmlCode.match(/^[>]{6}>+ /mg)) {
            alert('The blockquote nest level is limited to "6".');
            wiki.value = htmlCode.replace(/^[>]{6}>+ /mg, ">>>>>> ");
            base();
        }
        /* 2: by Leptailurus serval */
        while(/^> /m.test(htmlCode)) {
            htmlCode = htmlCode.replace(/^> .*$/mg, (match) => "<blockquote>\n" + match.slice(2) + "</blockquote>");
            htmlCode = htmlCode.replace(/<\/blockquote>\n<blockquote>/g, "");
        }
        /* 3 */
        htmlCode = htmlCode.replace(/<br><\/blockquote>/g, "\n</blockquote>");
        htmlCode = htmlCode.replace(/<\/blockquote>\n<br>/g, "</blockquote>");
        htmlCode = htmlCode.replace(/<br>\n<blockquote>/g, "\n<blockquote>");
        htmlCode = htmlCode.replace(/<\/blockquote>(?=<\/blockquote>)/g, "<\/blockquote>\n");
 
        /* (last-1) <br><div~ to <div~ */
    htmlCode = htmlCode.split("<br>\n<div").join("\n<div").split("<br>\n</div>").join("\n</div>").split("</div><br>").join("</div>");
        /* (last-2) ~<br> to ~ */
    htmlCode = htmlCode.replace(/<br>\n$/g, "");
}
 
function result() {
    html.value = htmlCode;
/* 
    if (uCol.checked) {
        html.value = '<head>\n<link' + ' rel="stylesheet" type="text/css" href="http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css">\n<script' + ' type="text/javascript" src="http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js"><' + '/script>\n<script' + ' type="text/javascript">\nisHTMLblockHide = true;\n<' + '/script>\n</head>\n<body>\n' + htmlCode + '\n\n<div id="scpHTMLblockResizeSwitch"></div>\n</body>\n';
    }else {
        html.value = '<head>\n<link' + ' rel="stylesheet" type="text/css" href="http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css">' + '\n</head>\n<body>\n' + htmlCode + '\n\n</body>\n';
    }
 */
 
    for(i = 0;i < attention.length;i++){
        while(html.value.match("<" + attention[i])) {
            alert("[["+attention[i]+"]] is NOT alowed.");
            wiki.value = wiki.value.replace("[["+attention[i], "[[NOT SUPPORTED OBJECT").replace("[[/"+attention[i], "[[/NOT SUPPORTED OBJECT");
            html.value = html.value.replace("<"+attention[i], "<NOT SUPPORTING OBJECT").replace("</"+attention[i], "</NOT SUPPORTING OBJECT");
        }
    }
}
 
function reset(){
    wiki.value = "";
    wiki2html();
}
 
function copyHtml(){
    if(execCopy(html.value)){
    }else {
        alert('error: copying failed');
    }
};
 
function execCopy(string) {
    let temp = document.createElement('div'); 
    temp.appendChild(document.createElement('pre')).textContent = string;
 
    let elemPosition = temp.style;
    elemPosition.position = 'fixed';
    elemPosition.left = '-100%';
 
    document.body.appendChild(temp);
    document.getSelection().selectAllChildren(temp);
 
    let result = document.execCommand('copy');
    document.body.removeChild(temp);
 
    return result;
};
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License