index.htmlにアクセスがあったら、JavaScriptでURLから演算式を取り出して計算結果を表示するようにしたいです。今、以下のような状態なのですがアドバイスをお願い致します。 ```html //演算式を取得 var equation =location.search.substring(1); //演算式になっていれば計算する if( equation.match(/+|-|\*|\/|(|)/){ document.write( equation ); } else { document.write("ERROR"); } ``` 以下のようにアクセスがあります。 curl 'http://example.co.jp/calc?abc' ERROR curl 'http://example.co.jp/calc?1+1' 2 curl 'http://example.co.jp/calc?1+2*3' 7 curl 'http://example.co.jp/calc?(1+2)*3' 9

JavaScriptで四則演算

index.htmlにアクセスがあったら、JavaScriptでURLから演算式を取り出して計算結果を表示するようにしたいです。
今、以下のような状態なのですがアドバイスをお願い致します。

html
1<!DOCTYPE html>
2<html>
3<head></head>
4<body>
5<script type="text/javascript">
6//演算式を取得
7var equation =location.search.substring(1);
8//演算式になっていれば計算する
9if( equation.match(/+|-|\*|\/|(|)/){
10document.write( equation );
11} else {
12document.write("ERROR");
13}
14</script>
15</body>
16</html>

以下のようにアクセスがあります。
curl 'http://example.co.jp/calc?abc'
ERROR
curl 'http://example.co.jp/calc?1+1'
2
curl 'http://example.co.jp/calc?1+2*3'
7
curl 'http://example.co.jp/calc?(1+2)*3'
9

kei344

2017/02/15 11:12

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、例示用ドメインはご自身で所有されていない限り example.com, example.jp, example.co.jp など例示用に予約されたドメイン名を利用してください。 http://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html

行動規範の内容に同意します

回答1件

ベストアンサー

計算するだけならeval関数でできるような気がします。
ただし、eval関数は入力された式を計算してくれるだけの関数ではなく、引数に渡した値をjavascriptとして実行してしまいます。そのため、うっかり意図しないjavascriptのコードを実行させてしまうようなことが発生し、大変危険なので、使用するときは入力された値が正しい値か厳密に調べなくてはなりません。
もし、ライブラリを導入できない環境でないかぎり**math.jsなどの計算ライブラリを利用することをおすすめします。**

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<script type="text/javascript">
9    try {
10        //演算式を取得
11        var equation = location.search.substring(1);
12        //演算式になっていれば計算する
13        if (Number.isFinite(eval(equation))) {
14            alert(eval(equation));
15        }
16    } catch (e) {
17        alert("ERROR");
18    }
19</script>
20</body>
21</html>

投稿2017/02/15 11:20

編集2017/02/15 11:23

s8_chu

総合スコア14731

hikochang

2017/02/15 13:31

正規表現で [0-9¥(¥)¥+¥-¥*¥/]+ などでチェックしてからであれば意図しないコードの実行は防げますかね？

Hyonta

2017/02/15 14:03

ありがとうございます！！無事計算できました。が、画面でみると計算結果が表示されるのですが、 teratermで curl 'http://example.co.jp/calc?1+1' のように打つと、ソースコードがそのまま表示されてしまいます。原因わかりますでしょうか。。。

kei344

2017/02/15 14:08

To: Hyontaさん JavaScriptはブラウザ上で動作するので、curl 出の取得時には動きません。

Hyonta

2017/02/15 14:13

そういうことですか！！！ curlでも計算結果が見たい場合にはJavaScriptを使えないんですか！根本からやり直しになりそうです。。。

s8_chu

2017/02/15 15:04 編集

返信が遅れてしまいすみません。 hikochangさん> 入力値のチェックを正規表現で適切に行うことができるのならば意図しないコードの実行は防げると思います。これは個人的な意見になりますが、正規表現で複雑なことをやろうとすると途中で対応しきれなくなってしまったり、万が一誤りがあったとしても発見することが難しいので、もしも他に方法があるならばそれを使うようにしています。 Hyontaさん> kei344さんのコメントの通り、通常curlではソースコードがターミナルに出力されるようになっていて、javascript実行後のHTMLを取得することはできないのではないかと思います。 kei344さん> 私の代わりに返信していただきありがとうございます。

Hyonta

2017/02/15 15:03

回答ありがとうございます。 curlでも計算結果を確認したい場合、どのような方法があるでしょうか。教えて頂けると幸いです(>_<)