3 steps to create React app from nothing​

Step 1. npm init​

• Ở bước này ta tạo được một môi trường để quản lí thu viện cũng như source code của dự án
• Được biết là React là một thư viện để tạo giao diện (UI) được chia nhỏ thành các component bằng code JS (Dùng JSX để viết giao diện)
• ReactDOM Là thư viện được tách ra từ React core => mục đích nhằm tách biệt phần tạo giao diện với phần giao tiếp với DOM ReactDOM là lớp liên kết giữa React và DOM, VD: như muốn hiện thị component React vào một DOM nào đó ta dùng

ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root'))

// hoặc để tìm DOM
ReactDOM.findDOMNode()

• React-router-dom Cơ bản React là thư viện để tạo UI cho ứng dụng nên thực chất nó không có Router, khi đó để có thẻ điều hướng trên một ứng dụng React ta cần dùng thư viện này Bài viết chi tiết về React-router-dom sẽ được nói trong một bài viết khác

• webpack

Step 2. Install react react-dom react-router-dom webpack​

• webpack: là thư viện để tạo ra bundle file từ các file đầu vào js, css, resource ...
• webpack-cli: Từ bản v4 đươc chia ra từ webpack core, dùng để chạy webpack bằng CLI, phù hợp với production
• webpack-dev-server: thực hiện hot reload khi có bất kì thay đổi nào từ file đầu vào. Phù hợp với qúa trình development

Triết lí của webpack.​

1. Mọi thứ đều là module: tất cả các file html, css, js, images... đều được webpack coi là một module. Từ đó hoàn toàn có thể export và import nó ở bất cứ chỗ nào để dùng.
2. Chỉ load nhưng thứ cần và load khi cần thiết: Khi file bundle trở nên quá lớn thì việc client load sẽ trở nên khó khăn và ảnh hưởng đến trải nghiệm. Như vậy webpack có một số cơ chế để tách nhỏ file bundle thành nhiều file ứng với mục đích khác nhau.

Link ref source pure react: https://github.com/vuanhtu1993/observation-state

Step 1: Install ZSH​

• ZSH (Z Shell) là một Unix shell cái mà được build on top của bash (shell mặc định của mac) và thêm một số tính năng khác

brew install zsh

Step 2: Install Oh My Zsh​

• Oh my Zsh là một framework cho việc quản lí cấu hình zsh. Ở đấy có thể tuỳ chỉnh rất nhiều thứ trong đó có theme của terminal

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Step 3: Install Powerline fonts​

• Là một bộ font được hỗ trợ các kí tự đặc biệt cho terminal

git clone https://github.com/powerline/fonts.git --depth=1
cd fonts
./install.sh
cd ..
rm -rf fonts

Step 4: Change theme and font​

Change theme: mở terminal ở thư mục ~

vim .zshrc

Search từ khoá ZSH_THEME="theme name", thay thế bằng ZSH_THEME="default"

ZSH_THEME="agnoster"

Lưu ý:

• Lúc này khi reset terminal theme đã được apply nhưng mà lỗi font :(
• Có thể thay rất nhiều theme khác nhau, các theme này đã dược define mặc định trong khi cài Oh my

Change font and color of font Open terminal lên > Terminal > Preference > Profile > Font > Change : chọn Rotobo Mono for Powerline Thay đổi màu từ mặc định cho hợp với style và cá tính của bạn trong Profile > ANSI color

Thế là done rồi :)

Technique 1 : Object.entries​

let obj = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
}

Object.entries(obj)
//0: (2) ["key1", "value1"]
//1: (2) ["key2", "value2"]
//2: (2) ["key3", "value3"]

Object.entries(obj).forEach(entry => {
  let key = entry[0];
  let value = entry[1];
  //use key and value here
});

Technique 2 : Object.keys​

let obj = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
}

Object.keys(obj) // return array of object key

Object.keys(obj).forEach(key => {
  let value = obj[key];
  //use key and value here
});

Technique 3 : Object.values​

let obj = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
}

Object.values(obj) // return array of object value

Object.values(obj).forEach(value => {
  //use value here
});

Technique 4 : for...in loop​

let obj = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
}

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    //no a property from prototype chain     
  }else{
    //property from protytpe chain
  }
}

Technique 5 : Object.getOwnPropertyNames​

• Like the for ... in technique but dont need to use hasOwnProperty build in method

let obj = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
}

Object.getOwnPropertyNames(obj).forEach(key => {
  let value = obj[key];
  //use key and value here
});

Anaconda common command​

1. conda env list : lists all environments
2. source activate env name : activate an environment
3. source deactivate: deactivate an environment
4. conda list : list all packages installed
5. conda create --name env name python=3 astroid babel : create new environment, specify version of python, and install packages
6. WINDOWS NOTE: SOURCE is not recognized. When deactivating and activating in the anaconda command prompt, skip 'source' and just type 'deactivate' or 'activate' depending on what you are trying to do.
7. conda env export > environment.yml: export conda environment requirements list to a file

Apply anaconda env into PyCharm​

• Mỗi một dự án đều cần được bọc bởi interpreter để lấy các thư viện ra và sử dụng từ trong interpreter đó. Nhiệm vụ bây là thay đổi interpreter măc định (môi trường máy tính global).

Bước 1: tạo interpreter bằng anaconda​

• Có thể tạo interpreter environment bằng conda create --name <env name> hoặc tạo bằng GUI của pyCharm

Bước 2: Adđ interpreter vào Project interpreter​

a. Project interpreter => Add interpreter => Existing Environment b. Pick anaconda3/envs/interpreter name/bin/python => Apply

1. Log Into MongoDB​

mongo -u <username> -p <password> --authenticationDatabase <dbname>

Câu lệnh được sử dụng để xác thực vào db ở local

2. Show All Databases​

show dbs

Show tất cả các DB

3. Select Database to Work With​

use <dbname>

Chọn DB sử dụng

4. Authenticate and Log Out From Database​

// Authenticate
//
db.auth("username", "password");
//
// Logout
//
db.logout()

Khi chuyển sang một DB khác, cẩn phải xác thực để sử dụng DB và logout khỏi

5. List Down Collections, Users, Roles, etc.​

//
// List down collections of the current database
//
show collections;
db.getCollectionNames();
//
// List down all the users of current database
//
show users;
db.getUsers();
//
// List down all the roles
//
show roles

6. Create a Collection​

db.createCollection("collectionName");

7. Insert a Document in a Collection​

db.createCollection("collectionName");

7. Insert a Document in a Collection​

//
// Insert single document
//
db.<collectionName>.insert({field1: "value", field2: "value"})
//
// Insert multiple documents
//
db.<collectionName>.insert([{field1: "value1"}, {field1: "value2"}])
db.<collectionName>.insertMany([{field1: "value1"}, {field1: "value2"}])

8. Save or Update Document​

//
// Matching document will be updated; In case, no document matching the ID is found, a new document is created
//
db.<collectionName>.save({"_id": new ObjectId("jhgsdjhgdsf"), field1: "value", field2: "value"});

Câu lệnh này thực hiện hoặc là thêm mới họăc là update trường thông tin phụ thuộc voà giá trị của _id

9. Display Collection Records​

//
// Retrieve all records
//
db.<collectionName>.find();
//
// Retrieve limited number of records; Following command will print 10 results;
//
db.<collectionName>.find().limit(10);
//
// Retrieve records by id
//
db.<collectionName>.find({"_id": ObjectId("someid")});
//
// Retrieve values of specific collection attributes by passing an object having 
// attribute names assigned to 1 or 0 based on whether that attribute value needs 
// to be included in the output or not, respectively.
//
db.<collectionName>.find({"_id": ObjectId("someid")}, {field1: 1, field2: 1});
db.<collectionName>.find({"_id": ObjectId("someid")}, {field1: 0}); // Exclude field1
//
// Collection count
//
db.<collectionName>.count();

10. Administrative Commands​

//
// Get the collection statistics 
//
db.<collectionName>.stats()
db.printCollectionStats()
//
// Latency statistics for read, writes operations including average time taken for reads, writes
// and related umber of operations performed
//
db.<collectionName>.latencyStats()
//
// Get collection size for data and indexes
//
db.<collectionName>.dataSize() // Size of the collection
db.<collectionName>.storageSize() // Total size of document stored in the collection
db.<collectionName>.totalSize() // Total size in bytes for both collection data and indexes
db.<collectionName>.totalIndexSize() // Total size of all indexes in the collection

Webpack là gì ?​

• Chắc hẳn bạn là người mới làm quen với front-end sử dụng các library hoặc framework js sẽ thường có các câu hỏi như là nó để làm gì, taị sao phải phức tạp nó ên như thế...

• Definition 1: Webpack là một module loader cho javascript

• Definition 2: module loader là một công cụ để quản lí import của các thư viện js, merge chúng tại với nhau để tạo ra một hoặc một vài file bundle

  * Tại sao lại cần dùng module loader: Hiện tại thế giới front-end không giống như là HTML, CSS, JQuery là 
  cân được thế giới như ngày xưa nữa. Khi thực hiện một dự án React, Vue hay Angular chúng ta phải sử dụng 
  rất nhiều các thư viện khác mà cứ để vào thẻ `<script/>` như trước chắc chắn là ko ổn cũng như hiệu năng  
  bị hạn chế => Module loader ra đời
  

• Definition 3: Loader nà gì?. Là những thư viện mà webpack cho phép can thiệp trước khi import files. Cho phép không chỉ bundle js files mà cả nhưng static như css, image ... (Vậy nghĩa là muốn bundle cái gì thì làm ơn install loader cái đấy vào nhá) VD một số Loader: style-loader, babel-loader max phổ biến file-loader...

• babel-loader: làm nhiệm vụ transpile ES6 -> ES5 vậy muốn bundle js thì cho web hiểu thì cần babel-loader chạy trước webpack (giờ còn ai không viết es6 nữa giơ tay nào để bỏ bố cái thằng này đi)

• style-loader: Như đã nói ở phần định nghĩa loader, style loader là một thư viện nhằm nâng cao khả năng của webpack không chỉ bundle js mà còn bundle cả style (đơn giản là nhét vào thẻ s)

• file-loader: tượng tự như style-loader, nhưng là để bundle static file

• Sass/scss-loader: Lại là một thư viện dể tiền sử lí trước style-loader

  • sass-loader transforms Sass thành CSS.
  • css-loader parses CSS vào JavaScript và resolve dependencies.
  • style-loader chèn CSS vào bên trong thẻ style

Map​

• Nếu tôi có 1 mảng và tôi muốn xử lý từng biến trong mảng theo cùng 1 cách, trả về các giá trị sau xử lý (số lượng đúng bằng số lượng phần tử ban đầu của mảng) thì tôi sẽ sử dụng map.

class Animal {
  constructor(name) {
    this.name = name;
  }
}
let arr = [
  new Animal("dog"),
  new Animal("rhino"),
  new Animal("bird"),
  new Animal("cat"),
];
let arrMap = arr.map((obj) => {
  obj.name = "hi" + obj.name;
  // Phai co return, nhung cai gi return se dc gan vao mang arrMap
  return obj;
})

Filter​

• Nếu tôi đã có 1 mảng nhưng tôi chỉ muốn lấy các phần tử theo 1 tiêu chuẩn nhất định, tôi sử dụng filter.

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age
  }
}
let arr = [
  new Animal("dog", 1),
  new Animal("rhino", 2),
  new Animal("bird", 2),
  new Animal("cat", 1),
];
let arrFilter = arr.filter((obj) => {
  if (obj.age > 1) {
    // nhung obj nao return true se duoc gan vao arrFilter
    return true;
  }
  return false;
})

Sử dụng filter để query nhiều trường trong object​

• Lưu ý syntax của filter trong doc

  var newArray = arr.filter(callback(element[, index[, array]]), argument2)

• Trong đó argument2 sẽ được dùng là this trong callback

    var users = [{name: 'John',email: 'johnson@mail.com',age: 25,address: 'USA'},
             {name: 'Tom',email: 'tom@mail.com',age: 35,address: 'England'},
             {name: 'Mark',email: 'mark@mail.com',age: 28,address: 'England'}];

    var query = {address: "England", name: "Mark"};

    function search(user){
      return Object.keys(this).every((key) => user[key] === this[key]);
    }

    var result = users.filter(search, query);

Reduce​

• Nếu tôi đã có 1 mảng nhưng tôi muốn sử dụng các giá trị trong mảng để tạo ra vài thứ khác hoàn toàn mới, tôi sử dụng reduce.

  Syntax arr.reduce(callback, [initialValue])

Trong đó callback là một function dạng như sau:

const cb = (accumulator, currentValue) {
  ....do sth
  return accumulator;
}

• accumulator là phần tích lũy, function cb return là cái gì thì nó sẽ là accumulator của vòng lặp sau (tức là cb không return thì accumulator sẽ trả về undefined)
• currentValue là các item trong mảng (duyệt từ đầu đến cuối mảng)
• initial là giá trị ban đầu của accumulator

  Nếu không có initialValue thì accumulator nhận giá trị đầu của mảng và currentValue nhận giá trị thứ 2 của mảng

Example​

• Flatten Array

let arr = [[1,2], [3,4], [5,6]];

function flatten(arr) {
    return arr.reduce((accumulator, currentValue) => {
        accumulator = [...accumulator, ...currentValue];
        return accumulator;
    }, [])
}
console.log(flatten(arr));
}

• Counting instance of value in object (đếm số lần xuất hiện của phần tử trong mảng)

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let result = names.reduce((accumulator, currentValue) => {
    if (currentValue in accumulator) {
        accumulator[currentValue]++;
    } else {
        accumulator[currentValue] = 1;
    }
    return accumulator;
}, {});
console.log(result);

• GroupBy by property

console.log(bestAction);

let people = [
    { name: 'Alice', age: 21 },
    { name: 'Max', age: 20 },
    { name: 'Jane', age: 20 }
];

function groupBy(objArr, property) {
    return objArr.reduce((accumulator, currentValue) => {
        let key = currentValue[property];
        if (!accumulator[key]) {
            accumulator[key] = [];
        }
        accumulator[key].push(currentValue);
        return accumulator;
    }, {});
}

console.log(groupBy(people, "age"));

• Revome duplicate value in array

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
//First way
function removeDuplicateItem(arr) {
    return arr.reduce((accumulator, currentValue) => {
        if (!accumulator.includes(currentValue)) {
            accumulator.push(currentValue);
        }
        return accumulator;
    }, []);
}
//Second way
function removeDuplicateItem(arr) {
    return arr.sort().reduce((accumulator, currentValue) => {
        let length = accumulator.length;
        if (length === 0 || accumulator[length - 1] !== currentValue) {
            console.log(length, currentValue);
            accumulator.push(currentValue);
        }
        return accumulator;
    }, []);
}

console.log(removeDuplicateItem(arr));

• Remove duplicate ARRAY in array

arr = [ [ '0', '3', '4', '8' ],
  [ '0', '3', '4', '8' ],
  [ '0', '3', '8' ],
  [ '0', '3', '8' ],
  [ '0', '3', '8' ],
  [ '0', '3', '8' ],
  [ '0', '3', '8' ],
  [ '0', '3', '8' ],
  [ '0', '3', '4', '8' ],
  [ '0', '3', '8' ] ];
let trips = arr.reduce((accumulator, currentValue) => {
      if (accumulator.length <= 0) {
        return [currentValue];
      } else {
        let count = 0;
        for (let i = 0; i < accumulator.length; i++) {
          if (JSON.stringify(currentValue) !== JSON.stringify(accumulator[i])) {
            count ++;
          }
        }
        if (count == accumulator.length) {
          return [...accumulator, currentValue];
        }
        return accumulator;
      }
    },[]);
    OUTPUT: trips // [ [ '0', '3', '4', '8' ], [ '0', '3', '8' ] ]

Một số hàm tổng hợp​

I. Chunk​

Chuyển 1 mảng thành 1 mảng chứa các mảng con nhỏ hơn với số lượng element định sẵn

• Chúng ta sẽ dùng Array.from() để tạo mảng mới có số lượng element khớp với size ta mong muốn.

Sử dụng Array.slice() để map các element của array mới thành 1 mảng có length = size

const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (_n, i) =>
    arr.slice(i * size, i * size + size)
  );

II. Compact​

Loại bỏ các giá trị false, null, 0, "", undefined, NaN khỏi mảng

• Sử dụng Array.filter() để filter các giá trị false, null, 0, "", undefined, NaN

const compact = arr => arr.filter(Boolean);
Examples:

compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]); // [ 1, 2, 3, 'a', 's', 34 ]

III. CountOccurrences​

Đếm số lần xuất hiện của 1 giá trị trong 1 mảng

• Sử dụng Array.reduce() để tăng giá trị biến đêm lên khi gặp giá trị đó trong mảng

const countOccurrences = (arr, value) => arr.reduce((a, v) => (v === value ? a + 1 : a + 0), 0);
Examples:

countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3

IV: Flatten​

Chuyển tất cả các mảng con trong 1 mảng thành 1 mảng thống nhất

const flatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? flatten(v) : v)));
Examples:

flatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]

### V: isSorted
> Trả về 1 nếu array đã được sort theo ascending order, trả về -1 nếu array đã được sort theo descending order và trả về 0 nếu array chưa được sort
```javascript
const isSorted = arr => {
  const direction = arr[0] > arr[1] ? -1 : 1;
  for (let [i, val] of arr.entries())
    if (i === arr.length - 1) return direction;
    else if ((val - arr[i + 1]) * direction > 0) return 0;
};
Examples:

isSorted([0, 1, 2, 3]); // 1
isSorted([0, 1, 2, 2]); // 1
isSorted([4, 3, 2]); // -1
isSorted([4, 3, 5]); // 0

VI: Union​

Trả về 1 mảng mới chưa tất cả các phần tử có trong 2 mảng đã uniq

const union = (a, b) => Array.from(new Set([...a, ...b]));
Examples:

union([1, 2, 3], [4, 3, 2]); // [1,2,3,4]

### VII: Take
> Trả về 1 mảng chứa số phần tử yều cầu tính từ phần tử đầu tiên
```javascript
const take = (arr, n = 1) => arr.slice(0, n);
Examples:

take([1,2,3,4,5,6,7,8]); // [1]
take([1,2,3,4,5,6,7,8], 0); // []
take([1,2,3,4,5,6,7,8], 2); // [1,2]
take([1,2,3,4,5,6,7,8], 10); // [1,2,3,4,5,6,7,8]

1. Độ mạnh của mật khẩu​

    ^(?=.*[A-Z].*[A-Z])(?=.*[!@#$&*])(?=.*[0-9].*[0-9])(?=.*[a-z].*[a-z].*[a-z]).{8}$

Kiểm tra độ mạnh của một mật khẩu thường là chủ quan nên không có câu trả lời chính xác tuyệt đối. Nhưng tôi cảm thấy đoạn regex này là một điểm khởi đầu tuyệt vời nếu bạn không muốn phải viết riêng hàm kiểm tra độ mạnh mật khẩu của bạn từ đầu.

2. Mã màu Hex​

    \#([a-fA-F]|[0-9]){3, 6}

Mã màu hex rất phố biến trong lĩnh vực phát triển web. Đoạn regex này có thể được sử dụng để lấy mã hex phù hợp từ chuỗi bất kỳ cho bất cứ mục đích nào.

3. Xác thực địa chỉ Email​

    /[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/igm

Một trong những nhiệm vụ phổ biến nhất đối với một nhà phát triển là kiểm tra một chuỗi có phải là một địa chỉ Email hay không. Đối với PHP, các bạn có thể sử dụng hàm filter_var: filter_var($$mail, FILTER_VALIDATE_EMAIL)

4. Địa chỉ IPv4​

    /\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/

Tương tự như một địa chỉ email là địa chỉ IP - được sử dụng để xác định một máy tính cụ thể truy cập Internet. Biểu thức chính quy này sẽ kiểm tra một chuỗi xem nó có tuân theo cú pháp địa chỉ IPv4 hay không.

5. Địa chỉ IPv6​

    (([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))

Hoặc có thể bạn sẽ muốn kiểm tra một địa chỉ theo cú pháp IPv6 mới hơn với đoạn regex nâng cao hơn này. Sự khác biệt là rất nhỏ mặc dù nó quan trọng trong quá trình phát triển.

6. Dấu phân cách hàng nghìn​

    /\d{1,3}(?=(\d{3})+(?!\d))/g

Mã regex này hoạt động trên bất kỳ số nào và sẽ áp dụng bất cứ dấu phân cách nào bạn chọn cho mỗi chữ số thứ ba phân tách thành hàng ngàn, hàng triệu,...

7. Thêm HTTP vào trước liên kết​

    if (!s.match(/^[a-zA-Z]+:\/\//))
    {
        s = 'http://' + s;
    }

Cho dù bạn đang làm việc trong JavaScript, Ruby hay PHP, biểu thức này có thể tỏ ra rất hữu ích. Nó sẽ kiểm tra bất kỳ chuỗi URL nào để xem nếu nó có tiền tố HTTP/HTTPS hay không, và nếu không, thêm vào trước chuỗi đó cho phù hợp.

8. Lấy tên miền từ URL​

    /https?:\/\/(?:[-\w]+\.)?([-\w]+)\.\w+(?:\.\w+)?\/?.*/i

Mỗi tên miền trang web đều chứa giao thức ở đầu (HTTP hoặc HTTPS) và đôi khi có tên miền phụ với đường dẫn trang bổ sung. Bạn có thể sử dụng đoạn regex này để cắt qua tất cả những điều đó và chỉ trả lại tên miền.

9. Sắp xếp các từ khóa bằng cách đếm số từ​

    ^[^\s]*$      //  matches exactly 1-word keyword
    ^[^\s]*\s[^\s]*$  //  matches exactly 2-word keyword
    ^[^\s]*\s[^\s]*   //  matches keywords of at least 2 words (2 and more)
    ^([^\s]*\s){2}[^\s]*$ //   matches exactly 3-word keyword
    ^([^\s]*\s){4}[^\s]*$ //   matches 5-words-and-more keywords (longtail)

Những ai dùng Google Analytics và Webmaster Tools sẽ thực sự thích biểu thức chính quy này. Nó có thể sắp xếp các từ khoá dựa trên số các từ được sử dụng trong một tìm kiếm.

Đây có thể là số lượng cụ thể (tức là chỉ có 5 từ) hoặc nó có thể phù hợp với một loạt các từ (tức là 2 hoặc nhiều hơn). Khi được sử dụng để sắp xếp và phân tích dữ liệu, nó là một trong những biểu thức chính quy mạnh mẽ.

10. Tìm một chuỗi Base64 hợp lệ trong PHP​

    \?php[ \t]eval\(base64_decode\(\'(([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)?){1}\'\)\)\;

Nếu bạn là một nhà phát triển PHP thì đôi khi bạn có thể cần phân tích qua code để tìm kiếm các đối tượng nhị phân đã mã hóa Base64 (ví dụ như tìm shell được giấu trong một tập tin PHP chẳng hạn). Đoạn regex này có thể áp dụng với tất cả code PHP và sẽ kiểm tra bất cứ chuỗi Base64 nào đang tồn tại.

11. Xác thực số điện thoại​

    ^\+?\d{1,3}?[- .]?\(?(?:\d{2,3})\)?[- .]?\d\d\d[- .]?\d\d\d\d$

Ngắn gọn, ngọt ngào và đi thẳng vào vấn đề. Đoạn regex này sẽ xác thực bất cứ cú pháp số điện thoại nào dựa trên phong cách số điện thoại Mỹ.

Điều này có thể biến thành một chủ đề khá phức tạp, tôi khuyên bạn nên đọc lướt qua chủ đề stack này cho câu trả lời chi tiết hơn.

12. Khoảng trắng ở đầu và cuối​

^[ \s]+|[ \s]+$

Sử dụng đoạn mã này để lấy ra khoảng trắng ở đầu/cuối từ một chuỗi. Đây có thể không phải là một việc lớn, nhưng đôi khi nó ảnh hưởng đến đầu ra khi lấy kết quả ra từ một cơ sở dữ liệu hoặc áp dụng vào mã hóa tài liệu.

13. Lấy nguồn ảnh​

\< [img][^\>][src] = [\"\']{0,1}([^\"\'\ >]*)

Nếu vì một số lý do nào đó mà bạn cần lấy ra một nguồn ảnh trực tiếp từ HTML thì đoạn mã này là giải pháp hoàn hảo. Mặc dù nó có thể chạy trơn tru trên Backend, các nhà phát triển JS nên dựa vào phương thức .attr() của jQuery cho Frontend.

14. Xác thực ngày trong định dạng DD/MM/YYYY​

^(?:(?:31(\/|-|.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$

Các ngày khó khăn vì chúng có thể xuất hiện dưới dạng văn bản + số, hoặc chỉ là số với các định dạng khác nhau. PHP có một hàm ngày tuyệt vời nhưng điều này không phải luôn là lựa chọn tốt nhất khi lấy ra từ một chuỗi thô (raw). Cân nhắc việc thay thế bằng cách sử dụng biểu thức chính quy này cho các cú pháp ngày cụ thể.

15. Khớp ID Video Youtube​

/https?:\/\/(?:youtu.be\/|(?:[a-z]{2,3}.)?youtube.com\/watch(?:\?|#!)v=)([\w-]{11}).*/gi

Youtube đã giữ cấu trúc URL giống nhau trong nhiều năm chỉ bởi nó hoạt động. Đây cũng là trang chia sẻ video phổ biến nhất trên web, vì thế các video Youtube có xu hướng điều phối lưu lượng truy cập nhiều nhất.

Nếu bạn cần lấy ra một ID video Youtube từ một URL thì đoạn regex này là hoàn hảo và hoạt động tốt với tất cả các biến thể của cấu trúc URL Youtube.

16. Xác thực ISBN​

/\b(?:ISBN(?:: ?| ))?((?:97[89])?\d{9}[\dx])\b/i

Sách được in theo một hệ thống số gọi là ISBN. Điều này có thể lấy khá khó khăn khi bạn xem xét sự khác biệt giữa ISBN-10 và ISBN-13.

Tuy nhiên đoạn regex đáng kinh ngạc này cho phép bạn để xác nhận một số ISBN và kiểm tra xem nó là ISBN10 hay 13. Tất cả các mã được viết bằng PHP vì vậy điều này có thể tỏ ra đặc biệt hữu ích cho các nhà phát triển web.

17. Kiểm tra mã bưu điện​

^\d{5}(?:[-\s]\d{4})?$

Tác giả của đoạn regex này không chỉ chia sẻ nó miễn phí mà còn dành thời gian để giải thích nó. Bạn sẽ thấy nó hữu ích cho dù bạn đang khớp một mã bưu điện loại 5 chữ số hay phiên bản dài 9 chữ số dài hơn.

Hãy nhớ rằng nó chủ yếu dành cho hệ thống mã bưu điện của Mỹ nên có thể bạn sẽ cần điều chỉnh cho các quốc gia khác.

18. Tên người dùng Twitter hợp lệ​

/@([A-Za-z0-9_]{1,15})/

Đây là một đoạn mã regex rất nhỏ để khớp tên người dùng Twitter tìm thấy trong một chuỗi. Nó kiểm tra dựa trên cú pháp đề cập (@mention).

19. Số thẻ tín dụng​

^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$

Chứng thực số thẻ tín dụng thường bắt buộc một nền tảng máy chủ an toàn. Nhưng regex có thể được sử dụng cho các yêu cầu tối thiểu của một số thẻ tín dụng điển hình.

20. Tìm thuộc tính CSS​

^\s[a-zA-Z-]+\s[:]{1}\s[a-zA-Z0-9\s.#]+[;]{1}

Có thể rất hiếm để chạy regex trên CSS nhưng nó không phải là một tình huống lạ.

Đoạn mã này có thể được sử dụng để lấy ra mọi thuộc tính và giá trị CSS khớp từ selector cụ thể. Nó có thể được sử dụng cho bất kỳ lý do nào, ví dụ như loại bỏ thuộc tính trùng lặp.

21. Loại bỏ chú thích HTML​

Nếu vì bất cứ lý do nào mà bạn cần phải loại bỏ tất cả các chú thích từ một khối HTML thì đây là mã regex cần dùng. Bạn sẽ tìm thấy một ví dụ PHP sử dụng preg_replace.

22. URL trang cá nhân Facebook​

/(?:http:\/\/)?(?:www.)?facebook.com\/(?:(?:\w)#!\/)?(?:pages\/)?(?:[\w-]\/)([\w-])/

Facebook rất phổ biến và có nhiều sự sắp đặt URL khác nhau. Trong một tình huống mà bạn đang lấy URL hồ sơ từ người sử dụng thì đoạn regex này có thể hữu ích để phân tích chuỗi và xác nhận rằng chúng có cấu trúc đúng. Đoạn này có thể làm chính xác điều đó và nó hoàn hảo cho tất cả các kiểu liên kết FB.

23. Kiểm tra phiên bản Internet Explorer​

^.MSIE 5-8?(?!.Trident\/[5-9].0).*$

Trình duyệt IE vẫn đang có thị phần người dùng lớn và các nhà phát triển thường phải kiểm tra phiên bản IE để xử lý tính tương thích của trang web.

Đoạn này có thể được sử dụng trong JavaScript để kiểm tra phiên bản của Internet Explorer (5-11) đang được sử dụng dựa trên chuỗi User-Agent.

24. Bóc tách giá​

/(\$[0-9,]+(.[0-9]{2})?)/

Giá cả đi kèm trong một loạt các định dạng có chứa số thập phân, dấu phẩy và ký hiệu tiền tệ. Biểu thức này có thể kiểm tra tất cả các định dạng khác nhau để lấy ra một mức giá từ bất kỳ chuỗi nào.

25. Phân tích tiêu đề Email​

/\b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+.)+[A-Z]{2,6}\b/i

Với một dòng code này bạn có thể phân tích thông qua một tiêu đề email để lấy ra thông tin "to" từ tiêu đề. Nó có thể được sử dụng song song với nhiều email liên kết với nhau.

26. Khớp một loại tập tin cụ thể​

/^(..(?!(htm|html|class|js)$))?^.$/i

Khi bạn đang làm việc với các định dạng tập tin khác nhau như .xml, .html và .js, nó có thể giúp kiểm tra các tập tin cả nội bộ (local) và được tải lên bởi người dùng. Đoạn này lấy ra một phần mở rộng tập tin để kiểm tra xem nó có giá trị nằm trong một danh sách các phần mở rộng hợp lệ hay không.

27. Khớp một chuỗi URL​

/[-a-zA-Z0-9@:%_+.~#?&//=]{2,256}.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_+.~#?&//=]*)?/gi

Đoạn này có thể sử dụng cho cả chuỗi HTTP và HTTPS để kiểm tra xem nó có khớp với cú pháp tên miền mức cao nhất (TLD) hay không. Cũng có một phiên bản đơn giản hơn đoạn này sử dụng RegExp của JavaScript.

28. Thêm rel="nofollow" vào các liên kết​

(<a\s(?!.\brel=)^>)(href="https?://)((?!(?:(?:www.)?'.implode('|(?:www.)?', $follow_list).'))^"+)"((?!.\brel=)^>)(?:^>)>

Nếu bạn đang làm việc với hàng loạt mã HTML có thể nó thật khủng khiếp khi phải làm thủ công các nhiệm vụ lặp đi lặp lại. Biểu thức chính quy là hoàn hảo cho công việc này và họ sẽ tiết kiệm được rất nhiều thời gian.

Đoạn regex này có thể lấy ra tất cả liên kết từ một khối HTML và thêm thuộc tính rel="nofollow" vào mỗi phần tử.

29. Khớp Media Query​

/@media(^{+){([\s\S]+?})\s*}/g

Chia tách các Media Query CSS vào từng tham số và thuộc tính của chúng. Điều này có thể giúp bạn phân tích CSS bên ngoài với sự tập trung trực tiếp hơn vào cách mà code hoạt động.

30. Cú pháp tìm kiếm Google​

/([+-]?(?:'.+?'|".+?"|[^+- ]{1}[^ ]*))/g

Bạn có thể xây dựng mã regex của riêng bạn cho các thao tác tìm kiếm nội dung bằng cách sử dụng cú pháp độc quyền của Google. Các dấu cộng (+) biểu thị các từ khóa bổ sung và dấu trừ (-) biểu thị rằng nên bỏ qua và loại bỏ khỏi kết quả.

Đó là một đoạn khá phức tạp nhưng được sử dụng đúng cách thì nó có thể cung cấp một cơ sở cho việc xây dựng thuật toán tìm kiếm của riêng bạn.