jQuery 質問スレッド vol.8

**Name_Not_Found** · 2017/10/23(月) 06:31:18.14

JavaScriptでDOM用ライブラリであるjQueryのスレです。
次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。

JavaScriptの質問は関連スレで質問して下さい。

■前スレ
jQuery 質問スレッド vol.7
https://mevius.5ch.net/test/read.cgi/hp/1478055094/

■関連スレ
JavaScript の質問用スレッド vol.130
https://mevius.5ch.net/test/read.cgi/hp/1501503056/
ECMAScript デス 6
https://mevius.5ch.net/test/read.cgi/tech/1483332914/
JavaScript ライブラリ総合質問所 vol.5
https://echo.5ch.net/test/read.cgi/hp/1465399470/

**Name_Not_Found** · 2017/10/23(月) 06:32:06.08

■テンプレ案
https://fiddle.jshell.net/6ksf2087/show/light/

■参考URL
ダウンロード、CDN
http://jquery.com/download/
ブラウザサポート
http://jquery.com/browser-support/
jQuery UI
http://jqueryui.com/
jQuery UI ダウンロ－ド
http://jqueryui.com/download/
リファレンス等
http://alphasis.info/
http://www.jquerystudy.info/
http://js.studio-kingdom.com/
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
http://qiita.com/fmy/items/345a264a1cf2e2a73f62

**Name_Not_Found** · 2017/10/23(月) 06:33:03.88

テンプレここまで

**Name_Not_Found** · 2017/11/21(火) 21:10:07.35

classの使い方違うと言われそうだがあえて質問。

<li id="i" class="hage hoge a1">
<li id="ro" class="hage hoge a2">
<li id="ha" class="hage a3">
～
<li id="ni" class="hage hoge a9">
<li id="ho" class="hoge a10">

liの数は10個固定。順序は動的に入れ替わる。
上のidは適当につけたもので、これは動的に変わらず（変えず）。
hage hogeはあったりなかったり、a○はどれかの数字で必ずある
a○の1～10の数は固定で他の数字が入ることはない。
a2←→a9など動的に入れ替わる。

で、任意の、例えば#roのa○のその時点での数字を取得するにはどうしたらいいでしょうか？
attributesで取得して正規表現で探すとか…は面倒だし無駄だし。
属性使えばattr()で簡単にできるがclassでできないものかと思いまして。

**Name_Not_Found** · 2017/11/21(火) 23:24:04.99

>>4
順序が入れ替わるのなら index() は無意味なので
className から取るしか無いと思う
var num = (elm) => elm.attr('class').match(/a\d+/)[0].replace(/a/, '');
console.log(num($('#ro')));

**Name_Not_Found** · 2017/11/22(水) 01:59:23.08

>>4
class名をデータのように扱うなら、data-*属性を使う実装に変える方がいいと思う
classでやるなら、classListから正規表現を使う

> attributesで取得して正規表現で探すとか…は面倒だし無駄だし。
そもそも、class名から数字を抽出する処理が無駄なわけでclass名を使うことがナンセンスかと

**Name_Not_Found** · 2017/11/22(水) 21:18:09.81

無駄ナンセンス、やはりそうですか。
data-は動的に変更した時点で即CSSと連動できましたっけ？

a○は
.a1 {}
.a2 {}
.a3 {}
というふうにCSSのためなのです。

**Name_Not_Found** · 2017/11/23(木) 11:07:21.49

>>5
こういう記述はまだ早いという人のほうが多いんじゃないかな
今のうちこれにしても数年後スタンダードになってるとも思えん

**Name_Not_Found** · 2017/11/23(木) 13:52:01.23

>>7
[data-hoge=a1] {
}
で定義できるよ。

**Name_Not_Found** · 2017/11/23(木) 16:08:20.34

datasetをcssでも使うならjQueryの.data()以外で読み書きしないとだめだな

**Name_Not_Found** · 2017/11/23(木) 16:59:14.28

即連動できるかに対して定義できるよって
ajax見たいにキャッシュ無効にできて即DOM書き換えられればいのにな

**Name_Not_Found** · 2017/11/23(木) 17:22:25.58

11だが俺も書き方悪かった
ようは誤解招きかねない書き方だなと

ネイティブjsでも書き換え必要→なら最初からattrでいいんじゃね？→
data-でなくユーザ指定の属性はいいのか、と
これやっちゃってる人多いと思う

**Name_Not_Found** · 2017/11/23(木) 21:38:30.89

>>8
かっこつけて先走りしたはいいが後で書き直すパターンかもな。

>>10
開発者？はなんでこんな設計にしてしまったのだろう。
これでしかできなかったのかね。

**Name_Not_Found** · 2017/11/24(金) 22:48:48.23

無難に独自属性attr()でやる（すでにやってる）ことにします。ありがとう。

**Name_Not_Found** · 2017/11/26(日) 15:52:35.16

jQueryはCSSは相性いいが、jsとCSSはいまいちだな
オブジェクト（連想配列）がCSSのプロパティと連動できれば最高なんだが

**Name_Not_Found** · 2017/11/26(日) 16:01:37.03

DOMではCSSは取得出来ないからな
相性どころか次元が違う

**Name_Not_Found** · 2017/11/27(月) 04:53:42.11

もう入り始めてるけどCSS Typed OMで記述は長くなるかもしれないが
ロジック的にきれいに書ける

**Name_Not_Found** · 2017/11/27(月) 20:35:28.42

だがjQueryは元はjs

**Name_Not_Found** · 2017/11/27(月) 21:38:57.34

元ｊｓなｗ

**Name_Not_Found** · 2017/11/28(火) 02:56:02.42

document.styleSheets すら参照できないjQueryとDOMを比較するのもどうかと思った

**Name_Not_Found** · 2017/11/28(火) 09:35:39.74

document.styleSheetsを引き合いに出すのはちょっとね
DOM APIでもdocument.styleSheetsを弄るのは最終手段で気持ちの悪いことだし

**Name_Not_Found** · 2017/11/28(火) 20:50:26.26

そうかね
俺はインラインスタイルを多用するコードの方が気持ち悪く感じるな

**Name_Not_Found** · 2017/11/28(火) 22:02:45.18

まあ、classやattributeでスタイルを書き換えるのがメインだから、setterとしての.css()には魅力を感じないというのはある

**Name_Not_Found** · 2017/11/28(火) 22:14:14.27

>>16
言うまでもないがjQueryはセレクタが便利
jsのノード取得ももっと拡張するとか

**Name_Not_Found** · 2017/11/28(火) 22:26:03.38

>>15がいっているのはこういうことだろうが、
jQuery(element).css({color: 'black', 'background-color': 'white'});
classでやれることをインラインスタイルで代替する事はまずない
インラインスタイルや!importantは基本避けるべき技術だな

**Name_Not_Found** · 2017/11/28(火) 22:57:05.02

だなって、インラインスタイルや!importantが出てくる意味がわからん

**Name_Not_Found** · 2017/11/28(火) 23:21:50.21

（attr()で属性変える＝CSSも変わる）
（オブジェクト変える≠CSSも変わる）
だな

**Name_Not_Found** · 2017/11/29(水) 01:34:48.51

.css()がインラインスタイルを書き換えている事を知らないんだろう
jQueryしか触ってないからDOMの基本も分かってない

**Name_Not_Found** · 2017/11/29(水) 20:33:02.73

誰に言ってるんだよ{

**Name_Not_Found** · 2017/11/29(水) 21:03:16.39

>>26

**Name_Not_Found** · 2017/11/29(水) 22:07:15.65

26だがインスペクタも見てるから嫌でも気がついてますが

**Name_Not_Found** · 2017/11/29(水) 22:26:44.38

>>25
>>15がいっているのはこういうことだろうが、

残念ですが違います

**Name_Not_Found** · 2017/11/29(水) 23:14:20.01

>>28
そういう意味じゃないだろ？
DOMオブジェクトの要素からCSSが取得できないってことだろｗ
お前こそ基本が分かっていない

**Name_Not_Found** · 2017/11/30(木) 00:00:12.46

>>19
何が違うん？

**Name_Not_Found** · 2017/11/30(木) 00:16:38.16

オブジェクト変えるでcss()だけしか出てこなかったのかね

**Name_Not_Found** · 2017/11/30(木) 07:14:56.48

>>33
「CSSが取得できない」が抽象的すぎて何をいってるのか、さっぱり分からん
もっと、具体的に書いてくれ

**Name_Not_Found** · 2017/11/30(木) 07:59:24.41

>>15
イメージを言語化できてない感があるから
jQueryとDOMで何が違うか、コードに書き表してみたら？

**Name_Not_Found** · 2017/11/30(木) 08:04:14.53

element.style, getComputedStyle, CSSRuleList
DOMにCSS捜査のために必要なオブジェクトは十分に揃ってる

**Name_Not_Found** · 2017/11/30(木) 11:13:44.08

>>37
//css
#hoge { color: red; }

//html
<div id="hoge">文字はred</div>

//id hoge のcolorを取得
var jqCss = $('#hoge').css('color');
console.log(jqCss);
var ele = document.getElementById('hoge');
var jsCss = document.defaultView.getComputedStyle(ele, null).getPropertyValue('color');
console.log(jsCss);

こういうことだろうな

**Name_Not_Found** · 2017/11/30(木) 18:09:56.25

<div class="幅500px">
<iframe class="IMG"><img 幅800画像></div>
aaa
</div>

上記ソースはテンプレでいじれないものとして。
幅500pxクラス内に写真が貼られた場合のみ</div>要素を追加し、
画像幅制限を解放し最後にもう一度幅500pxクラスを追加したいのですが、
クラスコードがそのまま文字クラスとして挿入されません。
$('.IMG').before('</div>');
$('.IMG').after('<div class="幅500px">');

希望は：
<div class="幅500px">
</div>←追加希望
<iframe class="IMG"><img 幅800画像></div>
<div class="幅500px">←追加希望
aaa
</div> 👀
Rock54: Caution(BBR-MD5:0be15ced7fbdb9fdb4d0ce1929c1b82f)

**Name_Not_Found** · 2017/11/30(木) 19:16:20.61

>>40
htmlからして無茶苦茶

40 · 2017/11/30(木) 19:25:35.96

>>40
質問を具体的にさせていただきますのでどなたかヘルプ願います。
<div class="A"> // 500px幅の画面中央寄せブロック
テキスト
<div class="IMG"> 画像（100＾1200px） </div>
テキスト
</div>
上記ソースをいじらず、500幅制限ブロック内で
それを越える幅を持つ画像が挿入された場合のみその画像を
最大幅1000pxまでを条件に拡大させて
親要素を無視して画面センタリグさせる方法はないでしょうか？

**Name_Not_Found** · 2017/11/30(木) 20:05:39.79

>>42
imgのwidthを取得して、imgのwidthが500px以上なら1000pxに拡大する
img或いは、div.IMGののmargin-leftを-250pxにすれば良いんじゃないの？

**Name_Not_Found** · 2017/11/30(木) 20:31:49.13

>>38
めんどくささが全然違うのをさも同等にできるかのように引き合いに出さなくてもいいよ

**Name_Not_Found** · 2017/11/30(木) 20:38:58.38

>>39
「オブジェクト（連想配列）がCSSのプロパティと連動できれば最高」はどこへ行った？
あと、>>35とは解釈が違うな

**Name_Not_Found** · 2017/11/30(木) 20:42:55.46

>親要素を無視して

子孫要素は、親の位置から、相対的に指定するものじゃないの？

42 · 2017/11/30(木) 20:54:27.27

>>43
このテンプレにランダムサイズの画像が入るときがある場合がある、という感じなので、
その都度計算してmarginとpaddingとかではなく単純に親要素を無視して、
もしくは>>40のように親の閉じタグを追加、末尾に親開始タグを入れられないかと、、

**Name_Not_Found** · 2017/11/30(木) 21:02:23.59

>>39
第三者が想像で書いてる時点で不毛だなあ
また、「残念ですが違います」だけ返されて終わりそう　>>32
本人は何がどう違うのか説明する気はないみたいだし、議論の価値なしかな

**Name_Not_Found** · 2017/11/30(木) 21:12:44.20

（オブジェクト変える＝CSSも変わる、ができるといいな）
だな

**Name_Not_Found** · 2017/11/30(木) 21:54:33.89

>>37
想像できなければ無理に入ってこなくてけっこう
どうせまたクセの強いコードやライブラリでどうこうするだけだろ
ちなみに擬人化なら俺がしたるで

**Name_Not_Found** · 2017/11/30(木) 22:38:43.40

>>47
$('.IMG').each(function(){
var $img = $(this).find('img');
if ($img.width() > 500) {
$img.width(1000);
$(this).css({'width': '1000px', 'margin': '0 auto'}).parent().before('<div class="A">add</div>').before(this);
}
});

こんな感じかな

**Name_Not_Found** · 2017/12/01(金) 00:08:19.93

>>42
みその画像っていうのは何みそですか？

**Name_Not_Found** · 2017/12/01(金) 00:14:07.69

>>51
<div class="1">
<div class="A">
テキスト
<div class="IMG">画像</div>
テキスト
</div>
</div>
これが以下のようにA親要素の上に来てしまいました。

<div class="1">
add
<div class="IMG">拡大化された画像</div>
<div class="A">
テキスト
テキスト
</div>
</div>

これだとテキストと画像の順番が変わってしまいますね。
やはり単純に親要素範囲内のテキストははみ出さずに、
親要素以上の幅を持つ画像が挿入された場合はそれのみ親幅を超えてセンタリング表示される
というのは無理な話なのでしょうか。。

**Name_Not_Found** · 2017/12/01(金) 00:23:48.90

というかjQueryの前にHTMLとCSSで
before と after を作ろうか？

それさえあれば変換する方法は簡単な話だ

**Name_Not_Found** · 2017/12/01(金) 00:43:41.67

>>54
<div class="100%wide_center_box">
<div class="500px_center_box">
テキスト
<div class="IMG">500で表示画像</div>
テキスト
</div>
</div>
----
.100%wide_center_box img {
max-width: 1000px;
margin: 0px auto;
}
htmlはいじれません。cssとスクリプトのみ書けます。
なので「可能なら」手っ取り早く画像直前で親クラス閉じタグ追加し、
好きなサイズで画像をセンタリング表示させ、
最後に親クラス開始タグ追加すればいいかとbeforeとafterで試みましたがうまく行かず、、
<div class="centerbox">
<div class="500box">
テキスト
</div>←追加
<div class="IMG">css指定した任意のサイズで画像表示</div>
<div class="500box">←追加
テキスト
</div>
</div>

**Name_Not_Found** · 2017/12/01(金) 06:00:43.22

>>55
画像の数は不特定多数？いくつかの固定数？
後者の場合、ファイル名は不特定？いくつかの固定数？

**Name_Not_Found** · 2017/12/01(金) 09:48:42.19

>>49
jQueryにそんな機能はないし、>>39で説明できてないけどね

**Name_Not_Found** · 2017/12/01(金) 10:16:37.02

>>57
DOMの扱いにくさを説明しているだけだろ？

**Name_Not_Found** · 2017/12/01(金) 10:41:05.23

>>58
>>15とは無関係だね
>>50で当人は捨て台詞を残してるけど、彼の意見を正確に理解した人はいないわけで

**Name_Not_Found** · 2017/12/01(金) 11:22:49.66

>>55
$('.IMG').each(function(){
var $img = $(this).find('img');
var $parent = $(this).parent();
var $contents = $parent.contents();
if ($img.width() > 500) {
$img.width(1000);
var $this = $(this);
var $div = $('<div class="500px_center_box" />' ).text($contents[2].textContent);
$contents[2].textContent = '';
$parent.after($this, $div);
}
});

こういうことかな？
.500px_center_box 内にインライン要素が入ってたらまた違うけどね

**Name_Not_Found** · 2017/12/01(金) 20:51:22.71

そもそも、できたらいいな＝できないことをコード化しろって

**Name_Not_Found** · 2017/12/01(金) 22:31:27.31

>>53
>親要素以上の幅を持つ画像が挿入された場合はそれのみ親幅を超えてセンタリング表示される
はcssだけでできなくもないがかなり条件があるので>>56に答えてくれんと何とも書けない

**Name_Not_Found** · 2017/12/03(日) 19:38:05.40

他スレより。ただしおすすめはしない。
自分的には、気持ち悪いしそもそも右に幅があるなら最初からその幅で固定する。

<select id="hoge">
　<option>ああああああああああああああああああああ</option>
　<option>いいいいいいいいいいいいいいいい</option>
　<option>ううううううううううううううううううう</option>
</select>

$('#hoge').on('mouseover', function(){
　$(this).width('300px');
});

$('#hoge').on('mouseleave', function(){
　$(this).width('100px');
});

**Name_Not_Found** · 2017/12/03(日) 20:06:35.37

>>63
ほかスレじゃ、ここを見た人が分からんだろ

HTML/CSS の質問に優しく答えるスレ 30
http://mevius.2ch.net/test/read.cgi/hp/1508043632/366

それにそのコードはjQueryはいらない
HTMLとCSSだけでできる

なので元スレの方に答えを書いた

**Name_Not_Found** · 2017/12/03(日) 23:27:41.55

後出しで答えってｗ

**Name_Not_Found** · 2017/12/04(月) 00:32:10.56

CSSの話題だからここはスレ違いってだけ

**Name_Not_Found** · 2017/12/04(月) 19:42:35.79

勘違いと認めて謝罪までしてるのに更に追い詰めるヤツ
会社で嫌われてるんだろうな

**Name_Not_Found** · 2017/12/05(火) 00:06:41.52

そうやってレスするから、
レス返すしかないだろ
お前が悪いんやで

**Name_Not_Found** · 2017/12/05(火) 01:34:44.34

>>67
自分で「部下に頼られる」書いてたわｗ

**Name_Not_Found** · 2017/12/05(火) 01:56:47.96

俺のことじゃなかったのか

**Name_Not_Found** · 2017/12/12(火) 03:02:24.32

HPで友達が稼げるようになった情報とか

⇒　http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

5J59HFYTNJ

**Name_Not_Found** · 2017/12/14(木) 21:34:08.50

>>70
どんだけ自意識強いんねん

**Name_Not_Found** · 2017/12/18(月) 22:46:59.92

今UIのAccordionを使用してますが項目が増えたので
https://www.meanthemes.com/demo/meanmenu/demo.html
の動作のように２層化させたいです（デモの+-は不要）。

<div id="a">
　<h3>
　<div id="b1">
　<h3>
　<div id="b2">
　　<h4>
　　<div id="c1">
　　<h4>
　　<div id="c2">

var $a = $(document.getElementById('a'));
$a.accordion();

この場合、
var $b2 = $(document.getElementById('b2'));
$b2.accordion();
と加えればいいのでしょうか。

また、b2レベルが多数ある場合
$b3.accordion();、$b4.accordion();、・・・
などとその都度増やさないといけないのでしょうか。
お願いします。

**Name_Not_Found** · 2017/12/18(月) 22:50:42.08

まず

var $a = $(document.getElementById('a'));
$a.accordion();

↓

$('#a').accordion();

**Name_Not_Found** · 2017/12/18(月) 22:54:58.72

<div id="a" class="accordion">
　<h3>
　<div id="b1">
　<h3>
　<div id="b2" class="accordion">
　　<h4>
　　<div id="c1">
　　<h4>
　　<div id="c2">

$('.accordion').accordion();

**Name_Not_Found** · 2017/12/20(水) 19:47:08.04

>>75
それ動いたとしても公式にいいの？

**Name_Not_Found** · 2017/12/20(水) 20:33:44.98

何となく動くようなら十分だろ
そんなに心配ならフルFlashででも作っとけ

73 · 2017/12/20(水) 21:52:07.16

レスありがとうございます。

>>74
$aは他で何回か使っているので73のようにしてたのですが
$('#a')でないといけないのでしょうか？

>>75
それぞれにoptionが使えなかったりイベント拾ってるので問題ありです。

**Name_Not_Found** · 2017/12/20(水) 22:32:44.16

>>78
> $aは他で何回か使っているので73のようにしてたのですが

メソッドチェーンを使えばいいので一つの関数内で何回も使う必要はない
別のイベントハンドラで使うならば、その都度取得した方がいい
イベントハンドラが違うということは要素に変化がある可能性があるから
別の関数で使うならば、関数の分割の仕方が悪い
何回も呼び出されてパフォーマンスに影響をあたえる場合は変数に入れるという手もありだが
そんな事例は少なく、一般論として短い書き方である$('#a')としたほうがよい

> それぞれにoptionが使えなかったりイベント拾ってるので問題ありです。
ならまとめられる部分だけまとめればいい

**Name_Not_Found** · 2017/12/21(木) 09:11:46.46

>>78
結果的には同じなのでいけない、間違いということではない
$(...)　【　jQuery(...)　】はjQuery API を使用するということ
jQuery API では$('#a') というセレクタが用意されているので
わざわざインターフェイスからメソッド継承で jQuery API を使用する必要はない

**Name_Not_Found** · 2017/12/21(木) 21:50:15.49

>>77
明らかにリファレンスやサンプルソースと違う場合、バージョンアップなどで不具合の可能性を残すことになる
つまりその時点で問題点を抱えることになり、己で首を絞めてるようなもの
疑問や不安が出るのは自然であり、今動けばいいなどと安易な輩と一緒に仕事してる人たちが気の毒だわ

**Name_Not_Found** · 2017/12/21(木) 22:10:08.66

＞ならまとめられる部分だけまとめればいい
無茶言うな～

**Name_Not_Found** · 2017/12/21(木) 22:18:42.82

>>81
馬鹿だな
そんなこと言ってちゃなんにも使えないって言ってるんだよ
不安で不安で何もできないより、適当に動く方がいい
そもそも見る方の環境も様々なのがWebだからね
バージョンの際には問題があれば対処すればいいだけ
そもそも流れの速いWebで同じライブラリやコードをいつもでも使おうと考える方が間違い

**Name_Not_Found** · 2017/12/21(木) 22:51:04.27

んなこたない
どんだけ暇人なんだ
その1件とは限らんだろ
まさか10年単位で使おうってわけでもあるまい

**Name_Not_Found** · 2017/12/21(木) 23:02:57.65

>>82
UI使っててそれはないわな
なら裸で書くだろ

ちなみに$aか$('#a')かはどっちでもいい
好みで使っとけ

**Name_Not_Found** · 2017/12/22(金) 00:01:21.23

>>78
何度も使うから、変数a にキャッシュしたのか

#a が永久に変化しないのなら、それで良い。
ただし、const, let か、定数を明記しておくこと

**Name_Not_Found** · 2017/12/22(金) 21:06:01.08

const来た～！！！

**Name_Not_Found** · 2017/12/22(金) 21:21:04.34

ちげーよｗ constは俺だ

73 · 2017/12/22(金) 23:03:00.26

>>79
まとめるがよくわかりませんが全て異なる処理の部分もあるので結局idの方がとなってしまいます。

**Name_Not_Found** · 2017/12/23(土) 08:32:52.14

javascriptもしくはjqueryでhtml文字列を渡したらサニタイズしたものを
返してくれる関数無いですか？

**Name_Not_Found** · 2017/12/23(土) 10:07:56.79

>>90
そんなものは要らない

「サニタイズ言うなキャンペーン」とは何か
http://takagi-hiromitsu.jp/diary/20051227.html#p02

**Name_Not_Found** · 2017/12/23(土) 10:35:22.93

>>90
javascriptでサニタイズする関数は無いよ
何が目的なのか解らないけど
$('<hoge>').text().html() で特殊文字はエスケープ出来るけど

**Name_Not_Found** · 2017/12/23(土) 11:26:14.89

>>92
ブラウザ側でsocket.ioで受信したデータをサニタイズして表示しようとしています。
$('<hoge>').text().html()の使い方についてですが、
<hoge>の部分は何でも良くて、textメソッドにサニタイズしたいタグが含まれる
可能性のある文字列を入れると戻り値としてサニタイズされた文字列が返るという
ことでしょうか？

**Name_Not_Found** · 2017/12/23(土) 13:06:10.80

ほらくそ、真面目にサニタイズとかに答えるから
サニタイズ言うなキャンペーン読んでこい
今後サニタイズ言うな
正しい言葉で質問し直せ
でないと答えられんだろうが

**Name_Not_Found** · 2017/12/23(土) 13:38:46.89

サニタイズ言うなキャンペーン読んできましたが、
結局どうしたらいいのか良く分かりません。結局どうすればいいのですか？

サニタイズ言うなということは、HTMLタグを無効化するとか言えばいいのですか？

**Name_Not_Found** · 2017/12/23(土) 13:41:33.37

無理に難しく言わずに用語を知らないのなら、
どうしたいのかを書けばいい

**Name_Not_Found** · 2017/12/23(土) 13:57:18.81

socket.ioでブラウザ（クライアント側）に送られてくるデータは他のユーザーが
送信したデータなのでHTMLタグなどを含んでいます。
（リアルタイムチャットサイトを作っています）
なので、受信したデータのHTMLタグなどを無効化したいです。

**Name_Not_Found** · 2017/12/23(土) 14:17:24.35

そういうのは無効化なんていわないんだよ。まあいいや
まずな、ブラウザに送られてくるデータっていうのは
サニタイズとか無害化とか無効化しようと考えるな。そのまま使え

でだ、問題が有るときはそのデータを「画面に表示するときだけ」なんだよ

言ってる意味わかるか？計算に使ったりメッセージを組み立てる時とか
そういうときには、無効化する前のデータを使うってことだ。

そして一番最終段階、画面に表示するときにHTMLタグをタグとして表示するのではなく
（無効化ではなく）文字列として表示すれば良いんだよ

その場合にやるのは、<> という文字を < > に変換（HTMLエスケープ）するってことだ。
これが本当にお前がやりたいことだ。
無効化とかサニタイズという言い方じゃ、こういうことをしたいのかって分からんだろ？
例えば <> を消したり大文字に変換したとしても、HTMLタグとして表示されないわけで
目的（サニタイズ）は達成できてるとも言える。

それからJavaScriptにはURIエスケープは有るがHTMLエスケープはない
文字列置換で自分で作ることはできるが。そもそもそんなことをする必要がない。

なぜなら、jQueryであればhtml()メソッドを使ってデータを表示されるだけで
自動的にHTMLエスケープが行われるからだ

**Name_Not_Found** · 2017/12/23(土) 14:38:15.63

言葉が適切でなかったことを謝ります。
詳しく教えていただきありがとうございます。

**Name_Not_Found** · 2017/12/23(土) 19:18:16.54

>>75
まともに動かないし動くわけがない