Chromeの場合に<textarea>のvalueが特殊文字としてエスケープされてしまう問題

Chromeの場合だけです。
下記jQueryによって<textarea>のvalueを改変すると、タグが特殊文字として送信されてしまいます。

###ソースコード

html
1<form name="post" method="post" action="http://example.com/testpost/">
2  <div>
3    <p>返信先：<span id="nicename">hanako</span></p>
4    <textarea name="message" placeholder="メッセージ"></textarea>
5    <button type="submit" id="submit" name="submit">送信</button>
6  </div>
7</form>

jQuery
1//送信前に「textarea」の「value」を改変
2$('body').on("click",'#submit',function(e){
3  e.preventDefault();
4  var nicename = $('#nicename').text();
5  var message = $('textarea').val();
6  $('textarea').val('<span class="replyto">'+nicename+'</span>'+message);
7  $('form').submit();  
8});

###問題の結果
Firefoxから送信すると、下記の出力であるのに対して、

html
1<p><span class="replyto">hanako</span>こんにちは！</p>

Chromeから送信すると、下記のように特殊文字として出力されてしまうのです。

html
1<p>&lt;span class=”replyto”&gt;hanako&lt;/span&gt;こんにちは！</p>

jQueryでunescapeも試しましたが効果はございませんでした。

Chromeというのは送信時に<textarea>のvalueにあるタグを勝手にエスケープする機能でもあるのでしょうか？

そうだとしたらそれを回避するにはどうしたらよろしいのでしょうか？

皆様のお知恵をお貸し下さい。どうぞ宜しくお願い致します。

macaron_xxx

2018/08/27 03:50

これって、spanを加えた形でpostしたいってことだと思うんですけど、固定みたいなんで、受け取り側で付与してあげたほうがいいと思うんですよね。

m.ts10806

2018/08/28 21:18

解決済みは良いのですがどのように解決されたのでしょうか？

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

回答1件

ベストアンサー

ざっくりしか見てませんがおそらく下記

.text()
↓
.html()

text()はHTMLエスケープが行われます。

投稿2018/08/24 21:13

m.ts10806

総合スコア80850

minminzemkun

2018/08/24 21:24

おはようございます。お世話になっております。 <span class="replyto">hanako</span> がエスケープされてしまう部分ですが、ご指摘の「.text()」で取得されるのは「hanako」だけなので、そこではなさそうです。ただ「.text()」がエスケープとは知りませんでした。今後の参考にさせて頂きます。ありがとうございます。