JavascriptのReplace関数について

scriptにreplace関数を用いたのですが
型が一致してないのか、
うまく機能しません。色々なサイトを見ても
型に注意した扱い方がわからないため
誤用してる点をご指摘ください。
参考サイトURL載せてくださると助かります。
コードはブログに張るので、
headerタグとbodyタグはいりません。

<form name="js">
　<input name="a" type="text" />x+
　<input name="b" type="text" />y=
　<input name="c" type="text" /><br />
　<input onclick="calculate()" type="button" value="計算する" />
　<br />
　<input onclick="clr()" type="button" value="消去" />
　<br />
</form>
<span id="a"></span>x+<span id="b"></span>
y=<span id="c"></span>
<script>
function calculate(){
　　　 var d = new Array(4);
　　　　var stringa;
　　　d[0]=document.js.a.value;
　　　　stringa=d[0].replace(/&/g,'&amp');
　　　　document.getElementById("a").innerHTML=stringa;
}
</script>

maisumakun

2018/02/15 00:31

対応するHTMLも載せていただけませんでしょうか（動かすべきエレメントの状態が原因、ということも考えられます）。

Madreader

2018/02/15 00:35

わかりました。

m.ts10806

2018/02/15 00:38

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

miyabi-sun

2018/02/15 01:34

連立方程式のように見受けられますが、それならばこれらのinput要素には数値以外入力されないはず…なぜ&を&にする必要があるんでしょうか？

Madreader

2018/02/15 02:14

エスケープしてから計算しようと思ったからです。ややこしかったですね

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

回答2件

ベストアンサー

ざっと見たところ、何が「うまく機能していない」のか、判断できませんでした。

jsFiddleに起こしてみた例

なお、何点か気になる点があります。

インデントに全角スペースを使っていますが、JavaScriptはともかく、他の言語ではスペースとして認識されないこともあります。タブかスペースでインデントしましょう。
document.js.aのような参照は古いやり方です。querySelectorやgetElement系のメソッドを使いましょう。
投げ込むものがテキストだけなら、innerHTMLを書き換えるのはXSSの原因になってしまうので、不適切です。.textContentを使えば、エスケープのための**replaceの必要もなくなります**。

投稿2018/02/15 01:50

maisumakun

総合スコア145184

Madreader

2018/02/15 02:24 編集

入力と出力はできてます。しかしreplaceはされないで5&と入力しても 5&と出力されてしまいました。機能しないとはreplaceが働かないという意味てす。もし誤解させてしまいましたらすみません。これはスマホのデバイスと関係ありますか？

maisumakun

2018/02/15 02:35 編集

「ユーザーから『5&』と見える必要がある」ということでしょうか。 innerHTMLにデータを代入する場合、データ上は「5&」としても表示が「5&」となるのは「全く正常な動作」です。

Madreader

2018/02/15 02:42 編集

そういうことです！文字列変換後の確認表示があると助かります。私は出力時に以下のコードで変換した値を表示できると考えてました。 document.getElementById("a").innerHTML=stringa;

maisumakun

2018/02/15 02:54

あくまでエンコードはシステムの都合である以上、「ユーザーにエンコード後の値を見せる」という需要が普通は発生しないので、まったく想定外でした。それこそ、.innerHTMLではなく.textContentに代入すれば、書いたとおりのテキストで表示されます。

Madreader

2018/02/15 03:08

document.getElementById("a").textContentですね参考になりました！御丁寧な解説本当にありがとうございます。

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

ちょっとなにをやりたいのかわかりづらいですね

var d = new Array(4);
d[0]=document.js.a.value;

わざわざ配列で処理することでしょうか？
また「document.js.a.value」の定義もないようです

stringa=d[0].replace(/&/g,'&amp');

「&amp」ではなく「&」でどうでしょう？

javascript
1<script>
2function calculate(){
3  var d = new Array(4);
4  var stringa;
5  d[0]="?hoge=1&fuga=2&piyo=3";
6  stringa=d[0].replace(/&/g,'&amp;');
7  document.getElementById("a").innerHTML=stringa;
8}
9window.addEventListener('DOMContentLoaded', function(e){
10  calculate();
11}
12</script>
13<a href="#" id="a">aaa</a>