はじめに
タイトルが適当でごめんなさい
『この正規表現よりこっちの方がいいよ！』などあれば教えて頂けると嬉しいです。
『この正規表現どこで使うの?』ですが、どうしても可変の値をHTMLで表示したい場合のXSS対策に使うと思ってます。
どうやって書こうって悩んでしまったので今回qiitaに載せました。
用語説明
自分のサイトなのに色々な用語をたくさん使ってしまったため、ここで用語の説明を簡単にさせて頂きたいと思います
『用語全然理解できなくないよ！』と言う方はここは読み飛ばしてください！
HTML特殊文字
HTMLでは、特別な文字として取り扱われる文字。
<strong> をHTMLに記述するとHTMLタグと認識されるとかそういったもの。
参考:http://www.shurey.com/js/labo/character.html
文字実体参照
特殊文字を普通の文字として使いたいときがある。そう言う時はあらかじめHTMLでこのように書くとその文字を表示できるよなるものがあります。参考は上のサイトを。
<を書きたければ<と書けみたいな
可変の値
固定の逆。その値が変わるだろう値。
例えば、
ユーザーの入力。
例えば、
API通信で取得する値
XSS
本来表示してあるHTMLの文章に意図したjsやHTMLなどを入れられそうだ！入れてしまえ！っといって入れられてしまうもの。
正規表現(code全体)
var text = '<script>!!!</script>&<strong>aaa</strong>&<script>sssss</script>&&""""&&&&&&<b>aa</b><psss>dsds</p><script>!!!</script>';
var regex1 = /(&){1}/gi;
var chenge1 = text.replace(regex1, '&')
var regex2 = /("){1}/gi;
var chenge2 = chenge1.replace(regex2, '"')
var regex3 = /<[^\/]{1}.*?>/gi;
var chenge3 = chenge2.replace(regex3, '<strong>')
var regex4 = /<(\/){1}.*?>/gi;
var chenge4 = chenge3.replace(regex4, '</strong>')
console.log(chenge4);
出力↓
<strong>!!!</strong>&<strong>aaa</strong>&<strong>sssss</strong>&&""""&&&&&&<strong>aa</strong><strong>dsds</strong><strong>!!!</strong>
これをHTMLで表示↓
※使用サイト:https://codepen.io/pen/
正規表現の説明
var regex1 = /(&){1}/gi; //『&』1文字を検索
var chenge1 = text.replace(regex1, '&') //『&』1文字を『&』に変換
var regex2 = /("){1}/gi; //『"』1文字を検索
var chenge2 = chenge1.replace(regex2, '"')//『"』1文字を『"』に変換
var regex3 = /<[^\/]{1}.*?>/gi; //『/』で始めらない文字1文字から始めり、後はなんでも可能 <a>や<bb>など当てはまる
var chenge3 = chenge2.replace(regex3, '<strong>')//それらを<strong>に変換
var regex4 = /<(\/){1}.*?>/gi; //『/』で始まる文字1文字から始めり、後はなんでも可能 </a>や</bb>など当てはまる
var chenge4 = chenge3.replace(regex4, '</strong>')//それらを</strong>に変換
ちなみに、
| 正規表現 | 意味 |
|---|---|
| . | 改行文字以外ならなんでもマッチ！ |
| 文字 + * | 文字がが表示されないか文字が連続で表示されるか |
| 文字 + ? | 文字が表示されないパターンか1回のみの表示となる |
参考
JavaScript 正規表現まとめ
正規表現パターンの記述
さいごに
以上！終わりです！(｡･ω･｡)
今お腹空いてます！