ホームページ ウェブフロントエンド jsチュートリアル JavaScript上級1 正規表現、Cookie管理、UserData_基礎知識

JavaScript上級1 正規表現、Cookie管理、UserData_基礎知識

May 16, 2016 pm 05:55 PM
javascript

首先,什么事正则表达式呢,其实引入概念很多时候并不能帮我们明白它到底是什么,所以我先简单描述下,正则表达式,其实就是一个记录字符串规则则的字符串,等我们看完这一部分,也就能明白它到底是什么了。

基本语法:正则表达式就是“/expression/”+表示搜索范围的符号。例如我们要找function这个关键词,就是/function/gi,其中g表示global,就是全局搜索,i表示ignor,就是忽略大小写。

在js中,我们通过RegExp类来实现。

这个类里面有很多很多的符号用来表示不同的索引方法,我先把这个表列一列:

元字符 说明 量词 说明 反义字符 说明
  . 匹配除了换行符号(\n)以外的任意字符   * 出现次数:[0,+∞)   \W 字母,数字,下划线,汉字以外的字符
  ^ 匹配字符串的开始   + 出现次数:[1,+∞)   \S 空白字符以外的字符
  $ 匹配字符串的结束   ? 出现次数:[0,1]   \D 数字以外的字符
  \b 匹配单词边界   {n}   出现次数:n   \B 匹配非单词的边界
  \d 匹配数字   {n,} 出现次数:[n,+∞)   [^] 在字符类中,^号后面的字符串以外的任意字符
  \s 匹配任意的空白符   {n,m}   出现次数:[n,m]   [-] 匹配从-前字符到-后字符的字符串中的字符/数字
  \w 匹配字母,数字,下划线或汉字        

上記の記号に加えて、3 つの概念があります。1 つはグループ化、1 つは後方参照、最後は候補です。
グループ化: 文字列を () で囲み、特定の規則に従って文字列を結合できるようにすることを指します。同時に、正規表現を使用して日付形式を表現するなど、括弧をネストすることもできます。 var dateReg=/^(d{1,4})(-)(d{1,2}(-)(d {1 ,2})$), もちろん、この方法にもいくつかの抜け穴があります。ここでは形式の問題を表現するだけです。
これらに加えて、角かっこもあります。たとえば、文字 x y z d w の 1 つだけを一致させたい場合は、[xyzdw] と書きます。数字 0 ~ 4 など、一致する場合は [0] となります。 -4] ですが、これは 1 文字のみを表します。
ac または bd を一致させるなど、複数を記述したい場合は、「|」記号を使用して (ac|bd) と記述します。
たとえば、abc のみを含む文字列と一致させたい場合は、次のように記述できます。 abdReg=/^[abc] $/; 以下は完全な例です。
コードをコピー コードは次のとおりです。

head>
正規表現
var str="agega" >
var abcReg=/^[abc] $/g;
var test1=false;
var test2=false;
if(abcReg.test(str))
test1=true;
if(abcReg.test(str2))
test2=true;
document.write("文字列 " str " の結果は次のとおりです: " test1 "
文字列 " str2 " の結果は次のとおりです: " test2) ;







逆方向参照: グループ化に基づく正規表現のアプリケーションです。まず、グループ番号を知る必要があります。左括弧でマークされた左から右のグループの順序に従い、1 から累積していきます。使用方法は 2 つあります: $group 番号またはグループ番号。
2 番目は、式内のグループを参照するのに適しています。「」は、通常と同じ意味を持つエスケープ記号です。予約文字と一致するときに使用されます。
たとえば、abc で始まり abc で終わり、途中に制限がない文字列と一致させたいとします。 Reg=/^(abc)[a-z]*1$/; 次の文を試してみてください。先ほどの例では、テストしましたが、エラーはありませんでした。
一般的に使用されるいくつかの一致正規表現:
1. 一致する日付: reg=/^d{4}-(((0[13578]|(10|12))-(0[1-9] | [1-2]d|3[01]))|(02-(0[1-9])|[1-2]d)|((0[469]|11)-(0[1- 9] ]|[1-2]d|30))$/g;
2. マッチング時間: reg=/^([0-1]d|[2][0-3](:([ 0 -5]d)){2}$/g;
3. 一致する電子メール アドレス: reg=/^([a-zA-Z]([0-9a-zA-Z]|(_))* @(([0-9a-zA-Z]|(_)) .) [a-zA-Z]{2,9})$/g;
4. 中国語の文字に一致します: reg=/^[ u4e00-u9fa5] $/g;
JavaScript は Cookie を操作します
Cookie が何であるかは誰もが知っていると思うので、容赦なく定義をコピーしました。
js で Cookie を操作するためのステートメントは次のとおりです。 cookie=name "="value ";expires=" date.toGMTString();
次に、Cookie を使用してログイン用のユーザー名とパスワードを記録します



コードをコピーします コードは次のとおりです:
cookie test



<フォーム名メソッド ="post" アクション = "#" >



= "center" >password:
= "center" >
; /テーブル>



エスケープは単純な暗号化であり、有効期間は通常 1 週間に設定され、1 週間後に自動的に削除されることを説明します。
もちろん、Cookie を書いただけで読み込まなければ無駄になりますので、Cookie ファイルの内容を読み取る方法を学ぶ必要があります。
そこで、スクリプトに 2 つの読み取り関数を追加しました:
コードをコピーします コードは次のとおりです:




body タグ onload イベント:

つまり、このコードは IE と FF では正しく実行されますが、Chrome では Cookie を取得できません。 。全く分かりません~どなたか理由が分かる方教えてくださいorz
Cookieの有効期限の変更はCookieの内容を変更するのと同じで、expiresフィールドの内容を見つけて変更するだけです。 . Cookieを削除したい場合は有効期限を昨日に設定すればOKです。
userData
userData は cookie とは異なり有効期限がなく、より多くのデータを保存できるため (640KB cookie: 4KB)、ページの入力量が多い場合には userData を使用してデータを保存できます。
データを userData に保存する: 主に 2 つの部分があります。コンテンツに名前を付けて userData に保存します。
学習する前に、これは Microsoft によって開発されたものであるため、テストの結果、FF と chrome には互換性がないことが示されたことに注意してください。
保存されたアルマナックに関する画像は次のとおりです:


OK 次に、userData を見てみましょう。 まずスクリプトの前にスタイルを追加し、パラメータを設定して userData に保存します。





.userData
>{
behavior:url(#default#userdata);




<テーブル幅="400" align="center" border="1">




<入力タイプ="ボタン" name="保存" value="confirm">

>
🎜>



コードをコピー


コードは次のとおりです:


関数 getContent(){
var formObj=formObj.content;
contentObj.value=contentObj.getAttribute ("contentText");
}

変更後の完全なプログラム:
コードをコピーします コードは次のとおりです:



Cookie テスト

.userData{behavior:url(#default#userData);}




<フォーム名="フォーム" メソッド="ポスト" アクション="#">
<テーブル幅="400" align="center" border="1">













ユーザー名:
title:
content: /td>
タイトル:
コンテンツ:





よろしくお願いします、互換性も可能です:(下ではこのセクションはすべて抄造されており、転送が多すぎるため、私も道源が不明です。)
localStorage:方式、localStorage 自体の利点: 容量大、使いやすさ、强大、原生サポート; 欠点は互換性の差 (chrome、safari、firefox、IE 9、IE8都サポート localStorage、主に IE8 以下のバージョンはサポートされません)、安全性

非常に一般的に普及しているインターフェイス:

localStorage.getItem(key): 指定されたキーをローカルに保存する値
localStorage.setItem(key,value): 値をキーフィールドに保存します
localStorage.removeItem(key):删除指定キー本地に存在する值

念のためlocalStorage に存在する值都は文字列型、在json データなどの単純なデータを処理する場合は、JSON クラスを使用して、json 文字列を実際に使用できる json 形式に変換する必要があり、localStorage の 2 番目の実践教程では、関連する機能を表示することに重点を置いています。
の現在の視聴者には、優れた送信者調整機能が組み込まれています。以下は、それぞれ Chrome と Firefox の調整ツールです。

は、非常に良い評価をいただいております。良かったです。これで再び壊れることはありません。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript と WebSocket: 効率的なリアルタイム画像処理システムの構築 JavaScript と WebSocket: 効率的なリアルタイム画像処理システムの構築 Dec 17, 2023 am 08:41 AM

JavaScript は Web 開発で広く使用されているプログラミング言語であり、WebSocket はリアルタイム通信に使用されるネットワーク プロトコルです。 2 つの強力な機能を組み合わせることで、効率的なリアルタイム画像処理システムを構築できます。この記事では、JavaScript と WebSocket を使用してこのシステムを実装する方法と、具体的なコード例を紹介します。まず、リアルタイム画像処理システムの要件と目標を明確にする必要があります。リアルタイムの画像データを収集できるカメラ デバイスがあるとします。

See all articles