JavaScript 全く同じ処理内容が異なる結果を出す

下記二つは全く同じ処理をしています
違いはscriptを呼び出すか、onclick内に記述しているかです
なぜかscriptの方は処理されておらず、
onclick内のほうは正常に処理されてます
なぜこのようなことになるのか、またどうしたら処理されるか、
お分かりの方教えていただけないでしょうか

同じ処理の記述で2つ目の結果にならないのは何故か
↓
1つめの結果
????
二つ目の結果


JavaScript
1<script>
2function aaa(){
3cde=c.value;
4replaceText=cde.split('&#x1f600;').join('&amp;#x1f600;');
5alert(replaceText);
6}
7</script>
8
9
10<textarea id="c">&#x1f600;</textarea>
11<input type="button" onclick="aaa()">

JavaScript
1<textarea id="c">&#x1f600;</textarea>
2<input type="button" onclick="cde=c.value;replaceText=cde.split('&#x1f600;').join('&amp;#x1f600;');alert(replaceText);">

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

回答2件

属性値内の「&」は「&」にエスケープする必要があります。

投稿2020/12/04 23:33

plasticgrammer

総合スコア629

退会済みユーザー

2020/12/04 23:38

属性値内に記述しているほうは置換できており、正常に動作しているかと思うのですが？

退会済みユーザー

2020/12/04 23:43

<textarea id="c">&#x1f600;</textarea> にしました。確かに同じ結果は生まれましたが、私が聞きたいのは提示した1と2の同じコードの処理結果の違いが生まれてる点になります

kyoya0819

2020/12/05 00:50

「HTML Entity」で調べてみるのはいかがでしょうか？

退会済みユーザー

2020/12/05 00:58

疑問は【同じ処理の記述で2つ目の結果にならないのは何故か】なので、HTML Entityがどうとかではないと思うのですが？もしなぜかわかるのでしたらご指摘いただけませんでしょうか？

maisumakun

2020/12/05 01:01

> 属性値内に記述しているほうは置換できており、正常に動作しているかと思うのですが？逆です。「属性値内に記述しているほう」は、「.split('😀')」のエスケープが処理されて「.split('????')」として動作しています。<script>に書く方にはそのような処理が効かないので、「.split('????')」と書かないと動作しません。

退会済みユーザー

2020/12/05 01:06 編集

頭が混乱してきました同じ処理なのに片方はされて、scriptには効かないってどういうことですか？

maisumakun

2020/12/05 01:08

歴史的経緯もあって、HTMLの解釈には複雑な部分もあります。

think49

2020/12/05 01:33

@rtyedさん > 疑問は【同じ処理の記述で2つ目の結果にならないのは何故か】なので、HTML Entityがどうとかではないと思うのですが？「script要素内の文字列リテラル値」と「onclick内の文字列リテラル値」が一致する事から、エスケープされていません。 https://jsfiddle.net/uwvsfc6d/ 「script要素内のコード」の & を & にエスケープしてください。 > 同じ処理なのに片方はされて、scriptには効かないってどういうことですか？同じ処理ではないので、別の結果になります。

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

ベストアンサー

HTML中に&#***;と書いたときの動作は、場所によって違います。

<textarea>内…通常のテキストとして処理されるので、&#***;は解釈される
属性値…&#***;は解釈される
<script>内…特殊な処理が行われ、&#***;は解釈されない

結果、.split('😀')という文字列の意味が場所によって違ってきて、「全く同じ処理内容」になっていないのです。

以下、誤解による回答

~~書く位置の問題ではないでしょうか。~~

~~cが<textarea id="c">を拾うためだとしたら、それより上に書いたコードでは正常に取得できない可能性があります。~~

（もっとも、このような「変数として直接拾う」という方法自体、あまり適当ではありません。document.getElementByIdなど、エレメントを取得するメソッドを使うことをおすすめします）

投稿2020/12/04 23:57

編集2020/12/05 01:07

maisumakun

総合スコア145977

退会済みユーザー

2020/12/05 00:02

ご指摘ありがとうございます下記に変更しましたが同じ結果は生まれておりません現在この疑問を解決できてる方はいませんよろしくお願いいたします <textarea id="c">😀</textarea> <input type="button" onclick="aaa()"> <script> function aaa(){ cde=c.value; replaceText=cde.split('😀').join('&#x1f600;'); alert(replaceText); } </script>