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

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

基本语法:正则表达式就是“/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







= "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);











>
🎜>



コードをコピー


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


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

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



Cookie テスト

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



















ユーザー名:
title: td>
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 までご連絡ください。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解:それが何をするのか、なぜそれが重要なのかjavascriptの分解:それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか?pythonまたはjavascriptの方がいいですか?Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか?JavaScriptをインストールするにはどうすればよいですか?Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1)ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2)node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

クォーツでタスクが開始される前に通知を送信する方法は?クォーツでタスクが開始される前に通知を送信する方法は?Apr 04, 2025 pm 09:24 PM

Quartzタイマーを使用してタスクをスケジュールする場合、Quartzでタスク通知を事前に送信する方法、タスクの実行時間はCron式によって設定されます。今...

See all articles

ホット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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません