diff --git a/Cargo.toml b/Cargo.toml index e8508a28..8ec446bc 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "japanese-address-parser" -version = "0.1.0-alpha.5" +version = "0.1.0-alpha.6" edition = "2021" description = "日本の住所を都道府県/市区町村/町名/その他に分割するライブラリです" authors = ["Yuuki Toriyama "] @@ -8,6 +8,7 @@ repository = "https://github.com/YuukiToriyama/japanese-address-parser" license = "MIT" exclude = [ "public/*", + "tests/*", ".github/*", ] diff --git a/public/index.html b/public/index.html index 9372923b..e94f7508 100644 --- a/public/index.html +++ b/public/index.html @@ -3,28 +3,40 @@ Demo | japanese-address-parser +

YuukiToriyama/japanese-address-parser

Rust製の住所パーサーです

- + +

住所を入力してください

+
+ + +
+ +

処理結果

+
- - - + + + + + + + - + - - - + + + + + + diff --git a/public/main.js b/public/main.js index 9f8491bd..639eed6e 100644 --- a/public/main.js +++ b/public/main.js @@ -1,7 +1,6 @@ import init, {Parser} from "../pkg/japanese_address_parser.js" const inputTextArea = document.getElementById("input") -const outputTextArea = document.getElementById("output") init().then(() => { document.getElementById("exec").addEventListener("click", () => { @@ -9,7 +8,36 @@ init().then(() => { alert("input: " + input) const parser = new Parser() parser.parse(input).then(result => { - outputTextArea.value = JSON.stringify(result, null, "\t") + document.getElementById("result").appendChild( + createRow(input, result) + ) }) }) -}) \ No newline at end of file +}) + +const createRow = (input, parseResult) => { + const tr = document.createElement("tr") + tr.appendChild(createCell(`

${input}

`)) + if (parseResult.error === undefined) { + tr.appendChild(createCell("

成功

")) + } else { + tr.appendChild(createCell("

失敗

")) + } + tr.appendChild(createCell(`

${parseResult.address.prefecture}

`)) + tr.appendChild(createCell(`

${parseResult.address.city}

`)) + tr.appendChild(createCell(`

${parseResult.address.town}

`)) + tr.appendChild(createCell(`

${parseResult.address.rest}

`)) + tr.appendChild(createCell(`${JSON.stringify(parseResult, null, null)}`)) + return tr +} + +const createCell = (innerHtml) => { + const td = document.createElement("td") + td.innerHTML = innerHtml + td.addEventListener("click", () => { + navigator.clipboard.writeText(td.innerText).then(() => { + console.log(td.innerText) + }) + }) + return td +} \ No newline at end of file diff --git a/public/style.css b/public/style.css new file mode 100644 index 00000000..a32da63d --- /dev/null +++ b/public/style.css @@ -0,0 +1,51 @@ +.input { + display: flex; +} + +.address { + border: 1px solid #ddd; + border-radius: 6px; + padding-left: 1em; + padding-right: 1em; + height: 48px; + flex: 1; + width: 300px; + max-width: 410px; + background: #eaedf2; + font-size: 18px; + margin-right: 10px; +} + +.button { + border-radius: 6px; + height: 48px; + width: 180px; + display: block; + letter-spacing: 0.05em; + background: #5bc8ac; + color: #fff; + font-weight: bold; + font-size: 20px; +} + +.button:hover { + background: #82dcc4; +} + +.output thead { + background: #5bc8ac; +} + +.output thead tr th { + font-weight: bold; + padding: 12px 30px 12px 42px; +} + +.output tbody tr td { + background: #eaedf2; + padding: 15px 10px; +} + +.output tbody tr td:hover { + background: #8eeacd; +} \ No newline at end of file
住所(文字列)住所(JSON)入力値ステータスaddress.prefectureaddress.cityaddress.townaddress.restJSON
- - - - - +

東京都中央区日本橋一丁目1-1

成功

東京都

中央区

日本橋一丁目

1-1

{"address":{"prefecture":"東京都","city":"中央区","town":"日本橋一丁目","rest":"1-1"}}