2. 程式人生 > >JavaScript基礎（十一）正則表示式、3D拖拽相簿

JavaScript基礎（十一）正則表示式、3D拖拽相簿

阿新 • • 發佈：2019-01-09

正則表示式、3D拖拽相簿

正則表示式

需求：找出一串字串中的數字

var str = 'fsalf6784h./#@$%hf12938';
for(var i=0;i<
 
str.length;i++){
	/*
	// 方法一
	var s = str.charAt(i);
	if( s == parseInt(s) ) {
		console.log(s)
	}
	*/
	/*
	// 方法二
	var code = str.charCodeAt(i)
	if(code>=48 && code<=57){
		console.log(str.charAt(i));
	}
	*/
	// 方法三
	var s = str.charAt(i);
	if(s>='0' && s<='9'){
		console.log(s);
	}
 

}

// 封裝方法
var str = 'fsalf6784h./#@$%hf12938';
// alert( getNum(str) ); // [6,7,8,4,1,2,9,3,8]
alert( getNum2(str) ); // [6784,12938]

function getNum(str){
	var arr = [];
	for(var i=0;i<str.length;i++){
		var s = str.charAt(i);
		if(s>='0' && s<='9'){
			arr.push(s);
		}
	}
	return arr;
}
 

/*要求輸出 [6784, 12938]*/
function getNum2(str){
	var arr = [];
	var res = '';
	for(var i=0;i<str.length;i++){
		var s = str.charAt(i);
		if(s>='0' && s<='9'){
			res += s;
		}else{
			if(res != ''){
				arr.push(res);
				res = '';
			}
		}
	}
	if(res != ''){
		arr.push(res);
	}
	return arr;
}

初識正則表示式

var str = 'fsalf6784h./#@$%hf12938';
function getNum(str){
	return str.match(/\d+/g);
}
alert( getNum(str) );  //  [6784,12938]

var str = '0123456789';
var reg = /\D/;
if(reg.test(str)){
	alert('不是純數字');
}else{
	alert('是純數字')
}

var str = '123adsad';
console.log(str.search(/a/)); // 3
console.log(str.search(/A/)); // -1
console.log(str.search(/A/i)); // 3

str = 'djal124849hf189029jfwa-3,.#@@skf89';
console.log( str.match(/\d+/g) ); // ["124849", "189029", "3", "89"]

var newStr = str.replace(/a/g, 'y');
console.log(newStr); // djyl124849hf189029jfwy-3,.#@@skf89

正則表示式：規則，讓計算機認識的一套規則
	定義：
		1）var reg = //;
		2）var reg = new RegExp();
	方法：
		1）test：匹配成功返回true，否則返回失敗
			reg.test(str)
		2）search：匹配成功返回成功後的位置的下標，否則返回-1
			str.search(reg)
		3）match：匹配成功返回匹配字元的陣列，否則返回null
			str.match(reg)
		4）replace：匹配成功把匹配的字串改變成新的字串
			str.replace(reg, newStr)
	轉義字元 \
		\d:數字  \D:非數字
		\s:用於匹配單個空格符，包括tab鍵和空格鍵
		\S:用於匹配單個空格符之外的所有字元
		\w:用於匹配字母，數字，下劃線[a-zA-Z0-9_]
		\W:[^a-zA-Z0-9_]
	標識：
		i:不區分大小寫，預設是區分大小寫
		g:匹配所有的
	標量（量詞）:
		+:一次或多次

案例-留言板遮蔽惡意留言

<input type="text" id="txt"><input type="button" id="btn" value="留言">
<div id="box"></div>

window.onload = function(){
	var oBtn = document.getElementById('btn');
	var oTxt = document.querySelector('#txt');
	var oBox = document.querySelector('#box');
	var reg = /垃圾|笨蛋|狗屎|傻逼/g;
	oBtn.onclick = function(){
		var val = oTxt.value;
		if(val){
			// val = val.replace(reg, '*');
			val = val.replace(reg, function(s){
				var res = '';
				for(var i=0; i<s.length; i++){
					res += '*';
				}
				return res;
			});
			var op = document.createElement('p');
			op.innerHTML = val;
			oBox.appendChild(op);
			oTxt.value = '';
		}
	}
}

正則表示式-匹配子項

<!-- 
匹配子項()
正則表示式的整體 ===> 母體
從左邊的第一個小括號開始，成為第一個子項
 -->
<script type="text/javascript">
	var str = '2018-12-12';
	// var reg = /\d+/g;
	// console.log(str.match(reg)); // ["2018", "12", "12"]

	var reg = /(\d+)(-)/g
	/*
	str.replace(reg, function(s, s0, s1){
		alert(s);  // 2018-   12-
		// s: 與母體相匹配
		// s0：與第一個子項相匹配的
		// s1：與第二個子項相匹配的
		alert(s0);  // 2018   12
		alert(s1);  // -  -
	});
	*/
	// 需求 '2018-12-12' ==> '2018.12.12'
	str = str.replace(reg, function(s, s0, s1, s2){
		// // 方法一
		// return s.substring(0, s.length-1) + '.';
		// 方法二
		return s0+'.';
	});
	alert(str)
</script>

正則表示式-轉義字元

轉義字元：
	\d \D \s \S \w([a-zA-Z0-9_]) \W([^a-zA-Z0-9_])
	.所有的字元
	\b 獨立的部分（匹配起始、結束、空格）

/*
var str = 'a.cd';
var reg = /a\.cd/;
alert(reg.test(str)); // true
*/
var str = 'abcd';
alert(/abc/.test(str)); // true
alert(/abc\b/.test(str)); // false
alert(/abc\b/.test('abc d')); // true

\b應用案例

<div id="box">
	<p class="con"></p>
	<p class="con"></p>
	<p class="con con1"></p>
	<p class="con"></p>
</div>

alert( getClass('con').length );
function getClass(className, obj){
	obj = obj || document;
	if(obj.getElementsByClassName){
		return obj.getElementsByClassName(className);
	}else{// 相容IE678
		var arr = [];
		var reg = new RegExp('\\b' + className + '\\b');
		var allE = obj.getElementsByTagName('*');
		for(var i=0;i<allE.length;i++){
			if(reg.test(allE[i].className)){
				arr.push(allE[i])
			}
		}
		return arr;
	}
}

\1的使用

/*
var str = 'abcdab';
var reg = /(ab)(cd)\1/;  // \1:表示匹配第一個子項，即abcdab
alert(reg.test(str));  // true
alert(/(ab)(cd)\2/.test(str));  // \2:表示匹配第二個子項，即abcdcd  所以 false
*/
alert( /(\d)\1/.test('asd33sd') ); // true
alert( /(\d)\1/.test('asd34sd') ); // false

正則表示式-字符集

正則表示式之字符集
	匹配字符集 []
	例如：[a-z] [f-h] [A-Z] [0-9]

alert( /abc/.test('abcd') ); // true
alert( /a[a-z]c/.test('abcd') ); // true
alert( /a[c-z]c/.test('abcd') ); // false
alert( /a[z-a]c/.test('abcd') ); // Uncaught SyntaxError: Invalid regular expression: /a[z-a]c/: Range out of order in character class

正則表示式-量詞

+：（至少出現一次）出現一次或多次 >= 1
{1,5} : 至少出現1次，最多5次
{5, } : 至少出現5次
* ：至少出現 0 次
? ：{0, 1} 出現1次或者 0 次

var str = '1234adas45das890das';
var reg = /\d/;
// alert( str.match(reg) ); // 1
// alert( str.match(/\d/g) ); // 1,2,3,4,4,5,8,9,0
// alert( str.match(/\d+/g) ); // 1234,45,890
// alert( str.match(/\d{1,}/g) ); // 1234,45,890
// alert( str.match(/\d{1,3}/g) ); // 123,4,45,890
// alert( str.match(/\d?/g) ); // 1,2,3,4,,,,,4,5,,,,8,9,0,,,,

常用正則表示式

// 匹配QQ號碼 5-10位： 第一位是1-9，所以剩下的是[0-9]的數字
// var reg = /^[1-9]\d{4, 9}$/

// 註冊賬號 字母開頭（^[a-zA-Z]）長度8-12不包括空格符
// var reg = /^[a-zA-Z]\S{7,11}$/

// 郵箱匹配 
// var reg = /^[a-zA-Z0-9_-][email protected][a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+){1,3}$/

// 手機號碼
// var reg = /^1\d{10}$/

// 身份證 18 15
// var reg = /^[1-9]\d{14}$ | ^[1-9]\d{17}$ | ^[1-9]\d{16}x$/

// 匹配中文
var reg = /^[\u4E00-\u9FA5]+$/

/*工作的時候*/
var regJson = {
	"QQ":/^[1-9]\d{4,9}$/,
	"regist":/^[a-zA-Z]\S{7,11}$/,
	"eamil":/^[a-zA-Z0-9_-][email protected][a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+){1,3}$/,
	//。。。。
};

總結

正則表示式總結
	規則：讓計算機去看的一套規則
	匹配字串的方法
		test() ==> 返回 true or false
		match() ==> 返回匹配的陣列
		search() ==> 返回匹配的索引，沒有匹配就返回-1
		replace(reg, function(s){})
	轉義字元：
		\d \D \s \S \w \W \b \. \1
	() : 子項
	[] : 字符集
	{} ：+ * ？
	標識：
		g匹配所有 
		i忽略大小寫
		m
	^ : 起始，注意在字符集裡面[^ ]就是非
	$ : 結束

3D拖拽相簿

階段一：

實現圖片3D展示效果，滑鼠隨意拖拽旋轉預覽圖片等
在這裡插入圖片描述

*{padding:0px;margin:0px;}
body{background:#000;}
#perspective{perspective: 800px;}
#wrap{width: 120px;height: 180px;margin: 50px auto;position: relative;/*設定3D環境*/transform-style: preserve-3d;transform: rotateX(-10deg);}
#wrap img{width: 100%;height: 100%;position: absolute;box-shadow:0 0 1em pink;border-radius:4px;-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));}
#wrap p{width: 1200px;height: 1200px;background:#fff;position: absolute;border-radius: 50%;left: 50%;top:102%;margin-left: -600px;margin-top: -600px;transform: rotateX(90deg);background:-webkit-radial-gradient(center center,600px 600px,rgba(242,79,242,0.4),rgba(0,0,0,0));}
/*
box-shadow：陰影
-webkit-box-reflect：倒影
	下方  間隔  線性漸變（top(0) ==> 40%(0.5)）
	below 10px  -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5))
background: -webkit-radial-gradient:映象漸變;
*/

<div id="perspective">
	<div id="wrap">
		<img src="img/1.jpg">
		<img src="img/2.jpg">
		<img src="img/3.jpg">
		<img src="img/4.jpg">
		<img src="img/5.jpg">
		<img src="img/6.jpg">
		<img src="img/7.jpg">
		<img src="img/8.jpg">
		<img src="img/9.jpg">
		<img src="img/10.jpg">
		<img src="img/11.jpg">
		<p></p>
	</div>
</div>

var wrap = document.getElementById('wrap');
var imgs = wrap.getElementsByTagName('img');
var imgLen = imgs.length;
var deg = 360/imgLen;
var nowX, nowY, lastX, lastY, minusX, minusY;
var roX = -10, roY = 0;
for(var i=0; i<imgLen; i++){
	imgs[i].style.transform = 'rotateY('+(i*deg)+'deg) translateZ(350px)';
}
// 拖拽 三個事件：按下、移動、擡起
// 滑鼠按下
document.onmousedown = function(ev){
	var e = ev || event;
	// 滑鼠按下時，給前一點座標賦值
	lastX = e.clientX;
	lastY = e.clientY;

	// 滑鼠移動
	this.onmousemove = function(ev){
		var e = ev || event;
		/*
		var x = e.clientX;
		var y = e.clientY;
		var oDiv = document.createElement('div');
		oDiv.style.cssText = 'width:5px;height:5px;background:yellow;position:absolute;left:'+x+'px;top:'+y+'px'
		this.body.appendChild(oDiv);
		*/
		// 獲取當前座標的值
		nowX = e.clientX;
		nowY = e.clientY;
		// 獲取差值
		minusX = nowX - lastX;
		minusY = nowY - lastY;

		roY += minusX*0.2;//乘以一個摩擦係數
		roX -= minusY*0.2;//乘以一個摩擦係數
		// console.log(minusX, minusY);
		wrap.style.transform = 'rotateX('+roX+'deg) rotateY('+roY+'deg)';

		// 獲取上一個座標的值
		lastX = nowX;
		lastY = nowY;
	}
	// 滑鼠擡起
	this.onmouseup = function(){
		this.onmousemove = null;
	}

	return false;// 阻止預設事件
}

階段二：

實現動畫展開預覽

window.onload = function(){
	var wrap = document.getElementById('wrap');
	var imgs = wrap.getElementsByTagName('img');
	var imgLen = imgs.length;
	var deg = 360/imgLen;
	var nowX, nowY, lastX, lastY, minusX, minusY;
	var roX = -10, roY = 0;
	var timer = null;
	for(var i=0; i<imgLen; i++){
		imgs[i].style.transform = 'rotateY('+(i*deg)+'deg) translateZ(350px)';
		imgs[i].style.transition = 'transform 1s '+((imgLen-i)*0.2)+'s';
	}
	window.onresize = mTop;
	function mTop(){
		var wH = window.innerHeight;
		wrap.style.marginTop = (wH/2-180)+'px'
	}
	mTop();
	// 拖拽 三個事件：按下、移動、擡起
	// 滑鼠按下
	document.onmousedown = function(ev){
		var e = ev || event;
		// 滑鼠按下時，給前一點座標賦值
		lastX = e.clientX;
		lastY = e
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
JavaScript基礎（十一）正則表示式、3D拖拽相簿

     
  
  
  
 
 
  正則表示式、3D拖拽相簿
  
   正則表示式
   
    需求：找出一串字串中的數字
    初識正則表示式
    正則表示式-匹配子項
    正則表示式-轉義字元
    
     \b應用案例
     \1的使用
    
    正則表示式-字符集
    正 



  
 

    


    
    
Linux學習總結（二十一）正則三劍客之awk

     
 awkawk 也是流式編輯器，它比sed的功能更強大
1.截取文檔中的某段
awk -F ‘:‘ ‘{print $1}‘ /etc/passwd |head -2-F 指定分割符，不指定以空格或者tab為分隔符print 為打印動作$1 為第一字段， $2 為第二字段，依次類推，$0標示整行那麽打印整個文檔 



  
 

    


    
    
Python3基礎之（三十 五）正則表示式

     
  
 
  
  
 一、正則表示式 
 正則表示式(Regular Expression)又稱 RegEx, 是用來匹配字元的一種工具. 在一大串字元中尋找你需要的內容. 它常被用在很多方面, 比如網頁爬蟲, 文稿整理,資料篩選等等. 最簡單的一個例子, 比如我需要爬取網頁中每一頁的標題. 而網頁中的標題常 



  
 

    


    
    
Linux 學習總結（十九）正則三劍客之grep

     
 grepgrep 過濾器，egrep可以理解為grep的升級版1 格式：grep [-cinvABC] ‘word‘ filename-c:統計符合要求的行數例如 ： grep -c ‘root‘ /etc/passwdgrep -c ‘‘ /etc/passwd 統計文件總行數-i：忽略大小寫-n：行號輸出 



  
 

    


    
    
Java基礎（十一）  面試題

     
 Java基礎   程序員面試   反射   面試題:
    如何獲取class字節碼文件對象/Class的類對象
    三種方式來獲取這個class字節碼文件對象:
    1)Object中的getClass() 
    2)任何數據類型的靜態屬性class      
    3)Class類中的方 



  
 

    


    
    
Java基礎（十一）

     
 tcp編程   反射   Java基礎   Javase   （一）TCP編程（1）TCP(建立連接通道)編程的客戶端的開發步驟
  1)創建客戶端的Socket對象
Socket:就是客戶端的Socket
    構造方法
        public Socket(InetAddress address, 



  
 

    


    
    
c++基礎（十一）

     
 自動   分享   類型   默認   void   size   out   -s   derived   類的繼承的概念
繼承是在保持已有類的基礎之上構造新類的過程，而派生是指在已有類的基礎之上新增自己的特性而產生新類的過程。二者是對同一個問題的不同描述，繼承側重於保持原有類的特性，而派生側重於增加新的特 



  
 

    


    
    
Go語言基礎（十一）—— 實現命令列引數對資料的簡單查詢小案例

     
  
 
 
 案例要求： 
 
  結合命令列引數、複合型別、包管理、排序等知識，寫一個商品管理系統 
  商品屬性包括：整型商品ID（gid）、字串型名稱(name)、整型類別(cid)、浮點型價格(price) 
  自己造一些假資料，實現如下功能： 
  shop.exe -cmd single -gi 



  
 

    


    
    
python之Linux基礎（十一）

     
  
 
 
  Linux常⽤伺服器構建-ssh和scp <1>ssh介紹 SSH為Secure Shell的縮寫，由 IETF 的⽹絡⼯作⼩組（Network Working Group）所制 定；SSH 為建⽴在應⽤層和傳輸層基礎上的安全協議。 SSH是⽬前較可靠，專為遠端登入會話和其他⽹絡服 



  
 

    


    
    
鳥哥的Linux私房菜基礎篇 第十一章 正則表示式與檔案格式化處理

     
 
								
								            
							
							
							
1. 正則的概念

正則表示式就是處理字串的方法，他是以行為單位來進行字串的處理行為， 正則表示式通過一些特殊符號的輔助，可以讓使用者輕易的達到“搜尋/刪除/取代”某特定字串的處理程式！

2. 基礎 



  
 

    


    
    
linux學習筆記之shell程式設計（一）正則表示式與字元處理

     
  
 
  
  
 shell程式設計 
 基礎正則表示式 
 正則和萬用字元的區別：正則是包含匹配，匹配檔案內容，grep，awk等支援正則表示式。萬用字元是完全匹配，匹配檔名，例如find，ls不認識正則表示式
 
 ####正則表示式常用的字元（注意區別於萬用字元裡面的符號）#### 
  
  -* 



  
 

    


    
    
http協議基礎（十一）http與https

     
 一、http的缺點 
之前有介紹過http協議相關的一些知識，http是相當優秀和方便的，但它也有缺點，主要不足表現在如下幾個方面： 
△ 通訊使用明文（不加密），內容可能會被竊聽 
△ 不驗證通訊方的身份，因此可能遭遇偽裝 
△ 無法證明報文的完整性，所以有可能已被篡改 
其他未加密的協議也存在這類問題 
 



  
 

    


    
    
JavaScript學習（十一）--數值處理物件

     
 
                目錄







































目錄

















































Math物件

1.math物件的屬性



例子：
 

var piValue=Ma 



  
 

    


    
    
Java還要再學一遍基礎（十一）WeakHashMap詳解

     
 
							
							
							WeakHashMap概述

WeakHashMap是以弱鍵實現的基於雜湊表的儲存對映資料的Map。當JVM對於這些弱鍵所指向的物件進行了清理回收之後，WeakHashMap會自動有效的將被回收了的對映從map中移除。

引用的相關知識

Java中的引用一共分 



  
 

    


    
    
JavaScript基礎（十五）多型、多繼承、設計模式

     
  
  
  
 
 
  多型、多繼承、設計模式
  
   多型
   多繼承
   
    單繼承
    多繼承
   
   設計模式
   
    簡單工廠
    安全工廠
    抽象工廠
    介面卡模式
   
  
 
  
 多型 
 多型：同一個方法多種呼叫方式 例如：有一個需 



  
 

    


    
    
JavaScript基礎（十二）面向物件、ajax

     
  
  
  
 
 
  面向物件、ajax
  
   面向物件
   
    面向物件程式設計
    new、prototype
    案例-面向物件程式設計實現banner圖
    包裝物件
   
   Ajax
   
    封裝
    jsonp
   
  
 
  
 面向物件  



  
 

    


    
    
Java基礎（十一）:用Java8中Stream實現不同集合過濾

     
 
                【前言】

       從開源中國的對Java各個版本使用投票可以看出，目前Java8還是以67%的壓倒性優勢遙遙領先（Java 11 已正式釋出，你在使用 Java 的哪個版本？）；眾所周知，Stream是Java8中的一大亮點，現在分享一下自己在工作中用它解決一個需求。 



  
 

    


    
    
C語言sscanf函式用法總結（一） 正則表示式

     
 
                
 
#include <cstdio>
#include <cstdlib>
#include <cstring>
#include <iostream>
using namespace std;
void sscanf_te 



  
 

    


    
    
Java 多執行緒基礎（十一）執行緒優先順序和守護執行緒

     
  Java 多執行緒基礎（十一）執行緒優先順序和守護執行緒
一、執行緒優先順序
Java 提供了一個執行緒排程器來監控程式啟動後進去就緒狀態的所有執行緒。執行緒排程器通過執行緒的優先順序來決定排程哪些執行緒執行。一般來說，Java的執行緒排程器採用時間片輪轉演算法使多個執行緒輪轉獲得CPU的時間片。 



  
 

    


    
    
正則表達式（十一）——find和lookingAt

     
 位置   字符   find()   spa   ring   3-0   reset   span   reg   1、最基本的matches()方法

 1 package com.wy.regular;
 2 
 3 import java.util.regex.Matcher;
 4 import j