ถอดรหัส URL ใน JavaScript — decodeURIComponent()

// ถอดรหัส query parameter values แต่ละตัว — กรณีที่พบบ่อย

const city     = decodeURIComponent('%E0%B8%81%E0%B8%A3%E0%B8%B8%E0%B8%87%E0%B9%80%E0%B8%97%E0%B8%9E%E0%B8%AF')  // 'กรุงเทพฯ'
const district = decodeURIComponent('%E0%B8%AA%E0%B8%B5%E0%B8%A5%E0%B8%A1')                                        // 'สีลม'
const category = decodeURIComponent('office%20furniture')                                                           // 'office furniture'
const filter   = decodeURIComponent('price%3A%5B200+TO+800%5D')                                                    // 'price:[200+TO+800]'
// หมายเหตุ: + ไม่ถูกถอดรหัสเป็นช่องว่าง — ดูส่วน + ในตาราง comparison

console.log(city)      // กรุงเทพฯ
console.log(district)  // สีลม
console.log(category)  // office furniture
console.log(filter)    // price:[200+TO+800]

// Redirect URL ถูก percent-encode เมื่อมันถูก embed เป็น parameter value
// ฝั่งรับ: extract แล้วใช้ — ไม่ต้อง manual decode กับ URLSearchParams

const incomingUrl = 'https://auth.company.com/callback' +
  '?next=https%3A%2F%2Fdashboard.internal%2Freports%3Fview%3Dweekly%26team%3Dplatform' +
  '&session_id=sid_7x9p2k'

const url       = new URL(incomingUrl)
const rawNext   = url.searchParams.get('next')       // Auto-decoded โดย URLSearchParams
const sessionId = url.searchParams.get('session_id') // 'sid_7x9p2k'

// rawNext ถูก decode แล้ว: 'https://dashboard.internal/reports?view=weekly&team=platform'
// อย่าเรียก decodeURIComponent(rawNext) อีก — นั่นจะเป็น double-decoding

const nextUrl = new URL(rawNext!)
console.log(nextUrl.hostname)                    // dashboard.internal
console.log(nextUrl.searchParams.get('view'))    // weekly
console.log(nextUrl.searchParams.get('team'))    // platform

// REST API ที่มี internationalised path segments
// แต่ละ UTF-8 byte ของตัวอักษรต้นฉบับถูก percent-encode แยกกัน

const encodedSegments = [
  '%E6%9D%B1%E4%BA%AC',                                         // 東京  (Tokyo)   — 3 bytes ต่อตัวอักษร
  'M%C3%BCnchen',                                               // München          — ü encoded เป็น 2 bytes
  'caf%C3%A9',                                                  // café             — é เป็น precomposed NFC
  '%E0%B8%A0%E0%B8%B9%E0%B9%80%E0%B8%81%E0%B9%87%E0%B8%95',  // ภูเก็ต
]

encodedSegments.forEach(seg => {
  console.log(decodeURIComponent(seg))
})
// 東京
// München
// café
// ภูเก็ต

// Extract file key จาก storage API URL
// Object key มี / ดังนั้นจึงถูก encode เป็น %2F ภายใน path segment
const storageUrl = 'https://storage.api.example.com/v1/objects/reports%2F2025%2Fq1-financials.pdf'
const rawKey     = new URL(storageUrl).pathname.replace('/v1/objects/', '')
// .pathname decode URL-level encoding แต่ %2F (ในรูป %252F ที่ URL level) คงอยู่
// ใช้ decodeURIComponent สำหรับขั้นตอนสุดท้าย:
const fileKey = decodeURIComponent(rawKey)  // 'reports/2025/q1-financials.pdf'
console.log(fileKey)

// CDN URL ที่มี internationalised path segments และ structured query string
// decodeURI() decode non-ASCII path แต่รักษา ? & = ไว้

const encodedUrl =
  'https://cdn.example.com/assets/%E6%9D%B1%E4%BA%AC%2F2025%2Fq1-report.pdf' +
  '?token=eyJ0eXAiOiJKV1QiLCJhbGci&expires=1735689600'

const readable = decodeURI(encodedUrl)
console.log(readable)
// https://cdn.example.com/assets/東京/2025/q1-report.pdf?token=eyJ0eXAiOiJKV1QiLCJhbGci&expires=1735689600
// ↑ Non-ASCII decoded; ? & = preserved — URL ยังคง structurally valid

// decodeURIComponent จะทำลาย URL — : / ? & = ถูก decode พร้อมกันหมด
const broken = decodeURIComponent(encodedUrl)
// ดูเหมือนกันที่นี่ แต่ URL อย่าง 'https%3A%2F%2F...' จะถูกทำลาย

// Parsing webhook callback หรือ OAuth redirect query string
const rawSearch =
  '?event_id=evt_9c2f4a1b' +
  '&product_name=Standing+Desk+Pro' +
  '&filter=price%3A%5B200+TO+800%5D' +
  '&tag=ergonomic&tag=adjustable' +
  '&redirect=https%3A%2F%2Fdashboard.internal%2Forders%3Fview%3Dpending'

const params = new URLSearchParams(rawSearch)

console.log(params.get('event_id'))      // 'evt_9c2f4a1b'
console.log(params.get('product_name'))  // 'Standing Desk Pro'       ← + decoded เป็นช่องว่าง
console.log(params.get('filter'))        // 'price:[200+TO+800]'      ← %3A และ %5B decoded
console.log(params.getAll('tag'))        // ['ergonomic', 'adjustable']
console.log(params.get('redirect'))      // 'https://dashboard.internal/orders?view=pending'

// วนซ้ำทุก parameters
for (const [key, value] of params) {
  console.log(`${key}: ${value}`)
}
// event_id: evt_9c2f4a1b
// product_name: Standing Desk Pro
// filter: price:[200+TO+800]
// tag: ergonomic
// tag: adjustable
// redirect: https://dashboard.internal/orders?view=pending

// URL ปัจจุบัน: https://app.example.com/search
//   ?q=standing+desk
//   &category=office+furniture
//   &sort=price_asc
//   &page=2

interface SearchFilters {
  query:    string | null
  category: string | null
  sort:     string
  page:     number
}

function getSearchFilters(): SearchFilters {
  const params = new URLSearchParams(window.location.search)
  return {
    query:    params.get('q'),                       // 'standing desk'
    category: params.get('category'),                // 'office furniture'
    sort:     params.get('sort') ?? 'relevance',
    page:     Number(params.get('page') ?? '1'),
  }
}

const filters = getSearchFilters()
console.log(filters.query)     // standing desk   (+ decoded อัตโนมัติ)
console.log(filters.category)  // office furniture

import { createReadStream } from 'fs'
import { createInterface } from 'readline'

// File: orders-export.txt — หนึ่ง URL-encoded record ต่อบรรทัด
// customer_name=%E0%B8%AA%E0%B8%A1%E0%B8%8A%E0%B8%B2%E0%B8%A2+%E0%B9%83%E0%B8%88%E0%B8%94%E0%B8%B5&order_id=ord_9c2f4a&product=Standing+Desk+Pro&total=5390%20THB
// customer_name=%E0%B8%99%E0%B8%A0%E0%B8%B2+%E0%B8%A7%E0%B8%87%E0%B8%A8%E0%B9%8C%E0%B8%97%E0%B8%AD%E0%B8%87&order_id=ord_7b3a1c&product=Ergonomic+Chair&total=3290%20THB
// customer_name=Somchai+Wongsawat&order_id=ord_2e8d5f&product=Monitor+Arm&total=1890%20THB

interface Order {
  customerName: string | null
  orderId:      string | null
  product:      string | null
  total:        string | null
}

async function parseOrdersFile(filePath: string): Promise<Order[]> {
  const fileStream = createReadStream(filePath, { encoding: 'utf-8' })
  const rl         = createInterface({ input: fileStream, crlfDelay: Infinity })
  const orders: Order[] = []

  for await (const line of rl) {
    if (!line.trim()) continue

    // URLSearchParams decode + เป็นช่องว่างและ %XX sequences อัตโนมัติ
    const params = new URLSearchParams(line)

    orders.push({
      customerName: params.get('customer_name'),  // 'สมชาย ใจดี'
      orderId:      params.get('order_id'),        // 'ord_9c2f4a'
      product:      params.get('product'),         // 'Standing Desk Pro'
      total:        params.get('total'),           // '5390 THB'
    })
  }

  return orders
}

const orders = await parseOrdersFile('./orders-export.txt')
console.log(orders[0])
// { customerName: 'สมชาย ใจดี', orderId: 'ord_9c2f4a', product: 'Standing Desk Pro', total: '5390 THB' }

import { createReadStream } from 'fs'
import { createInterface } from 'readline'

// บรรทัด Nginx access log มีลักษณะดังนี้:
// 192.168.1.42 - - [11/Mar/2026:10:23:01 +0000] "GET /api/search?q=standing%20desk%26brand%3ANorthwood&sort=price_asc HTTP/1.1" 200 1842

async function extractSearchQueries(logFile: string): Promise<string[]> {
  const rl     = createInterface({ input: createReadStream(logFile), crlfDelay: Infinity })
  const queries: string[] = []

  for await (const line of rl) {
    // Extract request path จาก log line
    const match = line.match(/"GET ([^ ]+) HTTP/)
    if (!match) continue

    try {
      const requestUrl = new URL(match[1], 'http://localhost')
      const query      = requestUrl.searchParams.get('q')
      if (query) queries.push(query)  // URLSearchParams decode อัตโนมัติ
    } catch {
      // ข้ามบรรทัดที่ไม่ถูกต้อง — access logs อาจมี entries ที่ถูกตัด
    }
  }

  return queries
}

const queries = await extractSearchQueries('/var/log/nginx/access.log')
console.log(queries)
// ['standing desk&brand:Northwood', 'ergonomic chair', 'monitor arm 27 inch']

import http from 'http'

// URL ที่เข้ามา: /api/products?q=standing+desk&warehouse=bangkok&minStock=10&cursor=eyJpZCI6MTIzfQ%3D%3D

const server = http.createServer((req, res) => {
  // สร้าง full URL — อาร์กิวเมนต์ที่สองคือ base ที่ URL constructor ต้องการ
  const requestUrl = new URL(req.url!, 'http://localhost')

  const searchQuery = requestUrl.searchParams.get('q')            // 'standing desk'
  const warehouseId = requestUrl.searchParams.get('warehouse')    // 'bangkok'
  const minStock    = Number(requestUrl.searchParams.get('minStock') ?? '0')
  const cursor      = requestUrl.searchParams.get('cursor')       // 'eyJpZCI6MTIzfQ=='

  if (!warehouseId) {
    res.writeHead(400, { 'Content-Type': 'application/json' })
    res.end(JSON.stringify({ error: 'จำเป็นต้องมี parameter warehouse' }))
    return
  }

  const cursorData = cursor ? JSON.parse(Buffer.from(cursor, 'base64').toString()) : null

  res.writeHead(200, { 'Content-Type': 'application/json' })
  res.end(JSON.stringify({ searchQuery, warehouseId, minStock, cursorData }))
})

server.listen(3000)

# ── Node.js one-liners ──────────────────────────────────────────────────

# Decode ค่า percent-encoded หนึ่งค่า
node -e "console.log(decodeURIComponent(process.argv[1]))" "%E0%B8%81%E0%B8%A3%E0%B8%B8%E0%B8%87%E0%B9%80%E0%B8%97%E0%B8%9E%E0%B8%AF%20%26%20%E0%B9%80%E0%B8%8A%E0%B8%B5%E0%B8%A2%E0%B8%87%E0%B9%83%E0%B8%AB%E0%B8%A1%E0%B9%88"
# กรุงเทพฯ & เชียงใหม่

# Parse query string และ print แต่ละคู่ key=value (ที่ decode แล้ว)
node -e "
  const params = new URLSearchParams(process.argv[1])
  for (const [k, v] of params) console.log(`${k} = ${v}`)
" "q=standing+desk&warehouse=phuket&minStock=10"
# q = standing desk
# warehouse = phuket
# minStock = 10

# Decode และ pretty-print URL-encoded JSON body (พบบ่อยใน webhook debugging)
node -e "
  const raw = decodeURIComponent(process.argv[1])
  console.log(JSON.stringify(JSON.parse(raw), null, 2))
" '%7B%22event%22%3A%22purchase%22%2C%22amount%22%3A149.99%2C%22currency%22%3A%22THB%22%7D'
# {
#   "event": "purchase",
#   "amount": 149.99,
#   "currency": "THB"
# }

# ── Python one-liner (มีในระบบ macOS/Linux ส่วนใหญ่) ─────────────
# unquote_plus decode + เป็นช่องว่างด้วย — ถูกต้องสำหรับ form-encoded data
python3 -c "
from urllib.parse import unquote_plus
import sys
print(unquote_plus(sys.argv[1]))
" "Standing+Desk+%26+Ergonomic+Chair"
# Standing Desk & Ergonomic Chair

# ── curl — log และ decode redirect URL จาก response header ──────────
curl -sI "https://api.example.com/short/abc123" | grep -i location |   node -e "
    const line = require('fs').readFileSync('/dev/stdin', 'utf8')
    const url  = line.replace(/^location:s*/i, '').trim()
    console.log(decodeURIComponent(url))
  "

npm install decode-uri-component
# หรือ
pnpm add decode-uri-component

import decodeUriComponent from 'decode-uri-component'

// Native function throw บน input ที่ไม่ถูกต้อง — อาจทำให้ request handler crash
try {
  decodeURIComponent('product%name%')   // ❌ URIError: URI malformed
} catch (e) {
  console.error('Native throw:', (e as Error).message)
}

// decode-uri-component return raw sequence แทนการ throw
console.log(decodeUriComponent('product%name%'))
// product%name%   ← malformed sequences ถูกเก็บไว้ as-is ไม่ throw

// Valid sequences ถูก decode ถูกต้อง
console.log(decodeUriComponent('%E0%B8%81%E0%B8%A3%E0%B8%B8%E0%B8%87%E0%B9%80%E0%B8%97%E0%B8%9E%E0%B8%AF%20%26%20%E0%B8%A0%E0%B8%B9%E0%B9%80%E0%B8%81%E0%B9%87%E0%B8%95'))
// กรุงเทพฯ & ภูเก็ต

// ผสม: valid sequences ถูก decode, invalid ถูกเก็บไว้
console.log(decodeUriComponent('%E0%B9%80%E0%B8%8A%E0%B8%B5%E0%B8%A2%E0%B8%87%E0%B9%83%E0%B8%AB%E0%B8%A1%E0%B9%88%20%ZZ%20Region'))
// เชียงใหม่ %ZZ Region   ← %ZZ ไม่ใช่ hex ที่ถูกต้อง — ถูกเก็บไว้ as-is

// การใช้งานจริงใน log processing pipeline
const rawSearchQueries = [
  'standing%20desk%20ergonomic',
  'price%3A%5B200+TO+800%5D',
  '50%25+off',       // ← จะ throw กับ decodeURIComponent  (bare %)
  'wireless%20keyboard%20%26%20mouse',
]

const decoded = rawSearchQueries.map(q => decodeUriComponent(q))
console.log(decoded)
// ['standing desk ergonomic', 'price:[200+TO+800]', '50%25+off', 'wireless keyboard & mouse']

// ── 1. Safe decode พื้นฐาน — return string ต้นฉบับเมื่อเกิด error ─────────
function safeDecode(encoded: string): string {
  try {
    return decodeURIComponent(encoded)
  } catch {
    return encoded  // return raw input หาก decode ล้มเหลว — ไม่ crash
  }
}

// ── 2. Safe decode + จัดการ + เป็นช่องว่าง (สำหรับ form-encoded values) ─────────
function safeFormDecode(formEncoded: string): string {
  try {
    return decodeURIComponent(formEncoded.replace(/+/g, ' '))
  } catch {
    return formEncoded.replace(/+/g, ' ')  // อย่างน้อย replace + แม้ส่วนที่เหลือจะล้มเหลว
  }
}

// ── 3. Safe full query string parser → plain object ──────────────────────
function parseQueryString(queryString: string): Record<string, string> {
  const result: Record<string, string> = {}
  try {
    const params = new URLSearchParams(queryString)
    for (const [key, value] of params) {
      result[key] = value  // URLSearchParams จัดการ decoding ทั้งหมดภายใน
    }
  } catch {
    // Return ว่างเปล่าอย่างเงียบๆ เมื่อ input ไม่ถูกต้องสมบูรณ์
  }
  return result
}

// การใช้งาน
console.log(safeDecode('%E0%B8%81%E0%B8%A3%E0%B8%B8%E0%B8%87%E0%B9%80%E0%B8%97%E0%B8%9E%E0%B8%AF'))  // กรุงเทพฯ
console.log(safeDecode('search%20for%2050%25+off'))   // search for 50% off (bare %)
                                                      // → จริงๆ แล้วใช้ได้; % ที่นี่คือ %25
console.log(safeDecode('malformed%string%'))          // malformed%string%  (ไม่ throw)

console.log(safeFormDecode('standing+desk+pro'))      // standing desk pro

console.log(parseQueryString('q=hello+world&tag=node%20js&page=2'))
// { q: 'hello world', tag: 'node js', page: '2' }