{"id":8518,"date":"2026-09-03T17:46:31","date_gmt":"2026-09-03T09:46:31","guid":{"rendered":"https:\/\/sadtojoy.com\/psych\/?p=8518"},"modified":"2026-09-03T17:46:33","modified_gmt":"2026-09-03T09:46:33","slug":"%e6%ad%a3%e5%88%99%e8%a1%a8%e8%be%be%e5%bc%8f%e6%b5%8b%e8%af%95%e5%99%a8","status":"publish","type":"post","link":"https:\/\/sadtojoy.com\/psych\/8518.html","title":{"rendered":"\u6b63\u5219\u8868\u8fbe\u5f0f\u6d4b\u8bd5\u5668"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8f9ff; color: #333; line-height: 1.6; }\n.container { max-width: 800px; margin: 0 auto; padding: 20px; }\nheader { text-align: center; margin-bottom: 30px; }\nh1 { color: #4a5568; font-size: 1.8em; margin-bottom: 5px; }\n.subtitle { color: #718096; font-size: 0.95em; }\n.input-group { margin-bottom: 20px; }\nlabel { display: block; font-weight: 600; margin-bottom: 8px; color: #4a5568; }\n.regex-row { display: flex; align-items: center; gap: 8px; }\n.slash { color: #a0aec0; font-size: 1.2em; }\ninput[type=\"text\"], textarea { width: 100%; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; }\n.flags-input { max-width: 60px; }\ntextarea { resize: vertical; }\n.button-row { display: flex; gap: 10px; margin-bottom: 20px; }\n.primary-btn { background: #667eea; color: white; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; }\n.secondary-btn { background: #48bb78; color: white; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; }\n.text-btn { background: none; color: #718096; border: 1px solid #e2e8f0; padding: 10px 20px; border-radius: 8px; cursor: pointer; }\n.result-section { background: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; }\n.match-count { font-weight: 600; color: #667eea; margin-bottom: 10px; }\n.match-tag { display: inline-block; background: #edf2f7; padding: 4px 10px; border-radius: 6px; margin: 4px; font-size: 13px; }\n.replace-result { background: #f7fafc; padding: 12px; border-radius: 8px; margin-top: 8px; font-family: monospace; }\n.disclaimer { margin-top: 20px; padding: 12px; background: #fffbeb; border-radius: 8px; font-size: 13px; color: #92400e; }\n\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/\/ \u7eaf\u903b\u8f91\u5c42 - \u6b63\u5219\u6d4b\u8bd5\nfunction regexTest(pattern, flags, text) {\n  try {\n    const regex = new RegExp(pattern, flags);\n    const matches = text.match(regex);\n    return { success: true, matches: matches || [], count: matches ? matches.length : 0 };\n  } catch (e) {\n    return { success: false, error: e.message, matches: [], count: 0 };\n  }\n}\n\nfunction regexReplace(pattern, flags, text, replacement) {\n  try {\n    const regex = new RegExp(pattern, flags);\n    const result = text.replace(regex, replacement);\n    return { success: true, result };\n  } catch (e) {\n    return { success: false, error: e.message, result: '' };\n  }\n}\n\nfunction regexSplit(pattern, flags, text) {\n  try {\n    const regex = new RegExp(pattern, flags);\n    const parts = text.split(regex);\n    return { success: true, parts };\n  } catch (e) {\n    return { success: false, error: e.message, parts: [] };\n  }\n}\ndocument.addEventListener('DOMContentLoaded', function() {\n  const patternInput = document.getElementById('pattern');\n  const flagsInput = document.getElementById('flags');\n  const testTextInput = document.getElementById('testText');\n  const replaceTextInput = document.getElementById('replaceText');\n  const testBtn = document.getElementById('testBtn');\n  const replaceBtn = document.getElementById('replaceBtn');\n  const clearBtn = document.getElementById('clearBtn');\n  const matchCount = document.getElementById('matchCount');\n  const matchesDiv = document.getElementById('matches');\n  const replaceResult = document.getElementById('replaceResult');\n\n  testBtn.addEventListener('click', function() {\n    const result = regexTest(patternInput.value, flagsInput.value, testTextInput.value);\n    if (!result.success) {\n      matchCount.textContent = '\u9519\u8bef: ' + result.error;\n      matchesDiv.innerHTML = '';\n      return;\n    }\n    matchCount.textContent = '\u627e\u5230 ' + result.count + ' \u4e2a\u5339\u914d';\n    matchesDiv.innerHTML = result.matches.map(m => '<span class=\"match-tag\">' + escapeHtml(m) + '<\/span>').join('');\n  });\n\n  replaceBtn.addEventListener('click', function() {\n    const result = regexReplace(patternInput.value, flagsInput.value, testTextInput.value, replaceTextInput.value);\n    if (!result.success) {\n      replaceResult.textContent = '\u9519\u8bef: ' + result.error;\n      return;\n    }\n    replaceResult.textContent = result.result;\n  });\n\n  clearBtn.addEventListener('click', function() {\n    patternInput.value = '';\n    flagsInput.value = '';\n    testTextInput.value = '';\n    replaceTextInput.value = '';\n    matchCount.textContent = '';\n    matchesDiv.innerHTML = '';\n    replaceResult.textContent = '';\n  });\n\n  function escapeHtml(text) {\n    const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#039;' };\n    return text.replace(\/[&<>\"']\/g, m => map[m]);\n  }\n});\n\n<\/script>\n\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>\u6b63\u5219\u8868\u8fbe\u5f0f\u6d4b\u8bd5\u5668 \u00b7 SadToJoy<\/title>\n<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n<div class=\"container\">\n  <header>\n    <h1>&#x1f50d; \u6b63\u5219\u8868\u8fbe\u5f0f\u6d4b\u8bd5\u5668<\/h1>\n    <p class=\"subtitle\">\u514d\u8d39\u5728\u7ebf\u6b63\u5219\u6d4b\u8bd5\u3001\u5339\u914d\u3001\u66ff\u6362\u5de5\u5177<\/p>\n  <\/header>\n  <main>\n    <section class=\"input-group\">\n      <label for=\"pattern\">\u6b63\u5219\u8868\u8fbe\u5f0f<\/label>\n      <div class=\"regex-row\">\n        <span class=\"slash\">\/<\/span>\n        <input type=\"text\" id=\"pattern\" placeholder=\"\u4f8b\u5982: \\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z|a-z]{2,}\\b\">\n        <span class=\"slash\">\/<\/span>\n        <input type=\"text\" id=\"flags\" placeholder=\"g i m\" maxlength=\"4\" class=\"flags-input\">\n      <\/div>\n    <\/section>\n    <section class=\"input-group\">\n      <label for=\"testText\">\u6d4b\u8bd5\u6587\u672c<\/label>\n      <textarea id=\"testText\" rows=\"6\" placeholder=\"\u8f93\u5165\u8981\u6d4b\u8bd5\u7684\u6587\u672c...\"><\/textarea>\n    <\/section>\n    <section class=\"input-group\">\n      <label for=\"replaceText\">\u66ff\u6362\u6587\u672c\uff08\u53ef\u9009\uff09<\/label>\n      <input type=\"text\" id=\"replaceText\" placeholder=\"\u4f8b\u5982: [\u5df2\u9690\u85cf]\">\n    <\/section>\n    <div class=\"button-row\">\n      <button id=\"testBtn\" class=\"primary-btn\">\u6d4b\u8bd5\u5339\u914d<\/button>\n      <button id=\"replaceBtn\" class=\"secondary-btn\">\u66ff\u6362<\/button>\n      <button id=\"clearBtn\" class=\"text-btn\">\u6e05\u7a7a<\/button>\n    <\/div>\n    <section class=\"result-section\">\n      <h3>\u5339\u914d\u7ed3\u679c<\/h3>\n      <div id=\"matchCount\" class=\"match-count\"><\/div>\n      <div id=\"matches\" class=\"matches\"><\/div>\n      <h3>\u66ff\u6362\u7ed3\u679c<\/h3>\n      <div id=\"replaceResult\" class=\"replace-result\"><\/div>\n    <\/section>\n    <section class=\"disclaimer\">\n      <p>&#x26a0;&#xfe0f; \u514d\u8d23\u58f0\u660e\uff1a\u672c\u5de5\u5177\u5b8c\u5168\u5728\u6d4f\u89c8\u5668\u672c\u5730\u8fd0\u884c\uff0c\u60a8\u8f93\u5165\u7684\u4efb\u4f55\u6587\u672c\u90fd\u4e0d\u4f1a\u4e0a\u4f20\u5230\u670d\u52a1\u5668\u3002<\/p>\n    <\/section>\n  <\/main>\n<\/div>\n<script src=\"logic.js\"><\/script>\n<script src=\"app.js\"><\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6b63\u5219\u8868\u8fbe\u5f0f\u6d4b\u8bd5\u5668 \u00b7 SadToJoy &#x1f50d; \u6b63\u5219\u8868\u8fbe\u5f0f\u6d4b\u8bd5\u5668 \u514d\u8d39\u5728\u7ebf\u6b63\u5219\u6d4b\u8bd5\u3001\u5339\u914d\u3001\u66ff\u6362\u5de5\u5177 \u6b63\u5219\u8868\u8fbe\u5f0f \/ \/ \u6d4b\u8bd5\u6587\u672c \u66ff\u6362\u6587\u672c\uff08\u53ef\u9009\uff09 \u6d4b\u8bd5\u5339\u914d \u66ff\u6362 \u6e05\u7a7a \u5339\u914d\u7ed3\u679c \u66ff\u6362\u7ed3\u679c &#x26a0;&#xfe0f; \u514d\u8d23\u58f0\u660e\uff1a\u672c\u5de5&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[],"class_list":["post-8518","post","type-post","status-publish","format-standard","hentry","category-psychotools"],"_links":{"self":[{"href":"https:\/\/sadtojoy.com\/psych\/wp-json\/wp\/v2\/posts\/8518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sadtojoy.com\/psych\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sadtojoy.com\/psych\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sadtojoy.com\/psych\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sadtojoy.com\/psych\/wp-json\/wp\/v2\/comments?post=8518"}],"version-history":[{"count":1,"href":"https:\/\/sadtojoy.com\/psych\/wp-json\/wp\/v2\/posts\/8518\/revisions"}],"predecessor-version":[{"id":8519,"href":"https:\/\/sadtojoy.com\/psych\/wp-json\/wp\/v2\/posts\/8518\/revisions\/8519"}],"wp:attachment":[{"href":"https:\/\/sadtojoy.com\/psych\/wp-json\/wp\/v2\/media?parent=8518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sadtojoy.com\/psych\/wp-json\/wp\/v2\/categories?post=8518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sadtojoy.com\/psych\/wp-json\/wp\/v2\/tags?post=8518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}