SignalR 是一个开源的实时通信库，用于构建实时 Web 应用程序。它提供了一个简单的 API，可以在客户端和服务器之间建立持久连接，以便实时地推送数据。
与传统的 WebSocket 相比，SignalR 提供了更高级的功能和更简单的开发体验。下面是一些主要区别：
支持多种传输方式：SignalR 可以使用多种传输方式，包括 WebSocket、Server-Sent Events（SSE）、长轮询和 Forever Frame。这使得 SignalR 在不同的环境中都能提供实时通信的能力，即使某些浏览器不支持 WebSocket，也可以使用其他传输方式。
自动处理连接管理：SignalR 管理连接的生命周期，包括连接的建立、断开和重新连接。它会自动处理连接的失败和重新连接的逻辑，简化了开发人员的工作。
服务器端推送：SignalR 允许服务器端主动推送消息给客户端，而不需要客户端发起请求。这使得实时通信变得更加高效和实时，适用于聊天应用、实时监控等场景。
跨平台支持：SignalR 可以在多个平台上使用，包括 .NET、Java、JavaScript 等。这使得开发人员可以使用自己熟悉的语言和框架来构建实时应用程序。
微软官方提供了针对 ASP.NET Core Web 应用（Razor 页面）的详细教程，这里给出 MVC 版本入门教程。
最终将创建一个正常运行的聊天应用：
创建 Web 应用项目
添加 SignalR 客户端库
在“解决方案资源管理器”>中，右键单击项目，然后选择“添加”“客户端库”。
在“添加客户端库”对话框中：
“提供程序”选择“unpkg”
“库”，请输入 @microsoft/signalr@latest。
选择“选择特定文件”，展开“dist/browser”文件夹，然后选择 signalr.js 和 signalr.min.js。
点击“安装” 。
创建 SignalR Hubs 类
using Microsoft.AspNetCore.SignalR;
/// <summary>
/// Hub 类管理连接、组和消息
/// </summary>
public class ChatHub : Hub
{
/// <summary>
/// 可通过已连接客户端调用 SendMessage，以向所有客户端发送消息
/// </summary>
public async Task SendMessage(string user, string message)
{
// Clients.All 向所有的客户端发送消息
// ReceiveMessage 是客户端监听的方法
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}其父类 Hub 可管理连接、组和消息。这里演示的是向所有客户端发送消息。
配置 SignalR
打开 Program.cs，添加注入：
builder.Services.AddSignalR();添加路由：
app.MapHub<ChatHub>("/chatHub");添加 SignalR 客户端代码
视图页面：
<div class="container">
<div class="row p-1">
<div class="col-1">用户</div>
<div class="col-5"><input type="text" id="userInput" /></div>
</div>
<div class="row p-1">
<div class="col-1">消息</div>
<div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
</div>
<div class="row p-1">
<div class="col-6 text-end">
<input type="button" id="sendButton" value="发送消息" />
</div>
</div>
<div class="row p-1">
<div class="col-6">
<hr />
</div>
</div>
<div class="row p-1">
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
</div>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>
<script src="~/js/chat.js"></script>chat.js 文件：
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
// 在连接建立之前禁用发送按钮
document.getElementById("sendButton").disabled = true;
connection.on("ReceiveMessage", function (user, message) {
var li = document.createElement("li");
document.getElementById("messagesList").appendChild(li);
// 修改此处时应注意脚本注入问题
li.textContent = `${user} says ${message}`;
});
connection.start().then(function () {
document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});完成。在线示例：https://xoyozo.net/Demo/SignalRDemo
推荐使用 SignalR 来平替 WebSocket，参考教程。
【服务端（.NET）】
一、创建 WebSocketHandler 类，用于处理客户端发送过来的消息，并分发到其它客户端
public class WebSocketHandler
{
private static List<WebSocket> connectedClients = [];
public static async Task Handle(WebSocket webSocket)
{
connectedClients.Add(webSocket);
byte[] buffer = new byte[1024];
WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
while (!result.CloseStatus.HasValue)
{
string message = Encoding.UTF8.GetString(buffer, 0, result.Count);
Console.WriteLine($"Received message: {message}");
// 处理接收到的消息，例如广播给其他客户端
await BroadcastMessage(message, webSocket);
result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
}
connectedClients.Remove(webSocket);
await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
}
private static async Task BroadcastMessage(string message, WebSocket sender)
{
foreach (var client in connectedClients)
{
if (client != sender && client.State == WebSocketState.Open)
{
await client.SendAsync(Encoding.UTF8.GetBytes(message), WebSocketMessageType.Text, true, CancellationToken.None);
}
}
}
}二、在 Program.cs 或 Startup.cs 中插入：
// 添加 WebSocket 路由
app.UseWebSockets();
app.Use(async (context, next) =>
{
if (context.Request.Path == "/chat")
{
if (context.WebSockets.IsWebSocketRequest)
{
WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
await WebSocketHandler.Handle(webSocket);
}
else
{
context.Response.StatusCode = 400;
}
}
else
{
await next();
}
});这里的路由路径可以更改，此处将会创建一个 WebSocket 连接，并将其传递给 WebSocketHandler.Handle 方法进行处理。
也可以用控制器来接收 WebSocket 消息。
【客户端（JS）】
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>WebSocket 示例（JS + ASP.NET）</title>
<style>
#list { width: 100%; max-width: 500px; }
.tip { color: red; }
</style>
</head>
<body>
<h2>WebSocket 示例（JS + ASP.NET）</h2>
<textarea id="list" readonly rows="20"></textarea>
<div>
<input type="text" id="msg" />
<button onclick="fn_send()">发送</button>
<button onclick="fn_disconnect()">断开</button>
</div>
<p id="tip_required">请输入要发送的内容</p>
<p id="tip_closed">WebSocket 连接未建立</p>
<script>
var wsUrl = "wss://" + window.location.hostname + ":" + window.location.port + "/chat";
var webSocket;
var domList = document.getElementById('list');
// 初始化 WebSocket 并连接
function fn_ConnectWebSocket() {
webSocket = new WebSocket(wsUrl);
// 向服务端发送连接请求
webSocket.onopen = function (event) {
var content = domList.value;
content += "[ WebSocket 连接已建立 ]" + '\r\n';
domList.innerHTML = content;
document.getElementById('tip_closed').style.display = 'none';
webSocket.send(JSON.stringify({
msg: 'Hello'
}));
};
// 接收服务端发送的消息
webSocket.onmessage = function (event) {
if (event.data) {
var content = domList.value;
content += event.data + '\r\n';
domList.innerHTML = content;
domList.scrollTop = domList.scrollHeight;
}
};
// 各种情况导致的连接关闭或失败
webSocket.onclose = function (event) {
var content = domList.value;
content += "[ WebSocket 连接已关闭，3 秒后自动重连 ]" + '\r\n';
domList.innerHTML = content;
document.getElementById('tip_closed').style.display = 'block';
setTimeout(function () {
var content = domList.value;
content += "[ 正在重连... ]" + '\r\n';
domList.innerHTML = content;
fn_ConnectWebSocket();
}, 3000); // 3 秒后重连
};
}
// 检查连接状态
function fn_IsWebSocketConnected() {
if (webSocket.readyState === WebSocket.OPEN) {
document.getElementById('tip_closed').style.display = 'none';
return true;
} else {
document.getElementById('tip_closed').style.display = 'block';
return false;
}
}
// 发送内容
function fn_send() {
if (fn_IsWebSocketConnected()) {
var message = document.getElementById('msg').value;
document.getElementById('tip_required').style.display = message ? 'none' : 'block';
if (message) {
webSocket.send(JSON.stringify({
msg: message
}));
}
}
}
// 断开连接
function fn_disconnect() {
if (fn_IsWebSocketConnected()) {
// 部分浏览器调用 close() 方法关闭 WebSocket 时不支持传参
// webSocket.close(001, "Reason");
webSocket.close();
}
}
// 执行连接
fn_ConnectWebSocket();
</script>
</body>
</html>
【在线示例】
https://xoyozo.net/Demo/JsNetWebSocket
【其它】
-
服务端以 IIS 作为 Web 服务器，那么需要安装 WebSocket 协议
-
一个连接对应一个客户端（即 JS 中的 WebSocket 对象），注意与会话 Session 的区别
-
在实际项目中使用应考虑兼容性问题
-
程序设计应避免 XSS、CSRF 等安全隐患
-
参考文档：https://learn.microsoft.com/zh-cn/aspnet/core/fundamentals/websockets
anichart.js 是一款将数据转化为动态柱状图/线性图的 js/ts 工具，可导出视频。
github: https://github.com/Jannchie/anichart.js
中文使用指南：https://github.com/Jannchie/anichart.js/blob/main/README-CN.md
docs 目录中有更详细的使用方法（英文）。
在线演示：https://xoyozo.net/Demo/BarGraph
目前 release 版本 3.0.0。
这里有一点常用设置示例：https://codesandbox.io/s/anichart-2x-m3xbz?file=/main.js
设置画布尺寸
stage.canvas.width = 1000;
stage.canvas.height = 500;重设尺寸不会重新计算内部元素的大小和位置，因此对响应式布局不太友好。
配置柱状图
示例：
const barChart = new ani.BarChart({
dy: 2, // 文字下沉
imageField: 'logo', // 图标字段名
itemCount: 16, // 最多显示条数
dateFormat: '%Y年%-m月', // 日期格式
barGap: 10, // 柱条间距
barInfoFormat: () => '', // 隐藏柱条上的文字
});
stage.addChild(barChart);循环播放
setInterval(function () {
if (!stage.playing) {
stage.sec = 0;
stage.play();
}
}, 1000);前言：本文源于前几天看到的一条微博：
对于这种言论我并不赞同。我大学学的是化学，没有学习过计算机专业的课程，但我认为至少这个问题并不需要多么高端的计算机专业知识，只要中学数学没有全还给老师，就应该能给出至少一种解法。比如说，我就随便涂了一个多边形和一个点，现在我要找出一种通用的方法来判断这个点是不是在多边形内部（别告诉我用肉眼观察……）。
首先想到的一个解法是从这个点做一条射线，计算它跟多边形边界的交点个数，如果交点个数为奇数，那么点在多边形内部，否则点在多边形外。
这个结论很简单，那它是怎么来的？其实，对于平面内任意闭合曲线，我们都可以直观地认为，曲线把平面分割成了内、外两部分，其中“内”就是我们所谓的多边形区域。
基于这一认识，对于平面内任意一条直线，我们可以得出下面这些结论：
直线穿越多边形边界时，有且只有两种情况：进入多边形或穿出多边形。
在不考虑非欧空间的情况下，直线不可能从内部再次进入多边形，或从外部再次穿出多边形，即连续两次穿越边界的情况必然成对。
直线可以无限延伸，而闭合曲线包围的区域是有限的，因此最后一次穿越多边形边界，一定是穿出多边形，到达外部。
现在回到我们最初的题目。假如我们从一个给定的点做射线，还可以得出下面两条结论：
如果点在多边形内部，射线第一次穿越边界一定是穿出多边形。
如果点在多边形外部，射线第一次穿越边界一定是进入多边形。
把上面这些结论综合起来，我们可以归纳出：
当射线穿越多边形边界的次数为偶数时，所有第偶数次（包括最后一次）穿越都是穿出，因此所有第奇数次（包括第一次）穿越为穿入，由此可推断点在多边形外部。
当射线穿越多边形边界的次数为奇数时，所有第奇数次（包括第一次和最后一次）穿越都是穿出，由此可推断点在多边形内部。
到这里，我们已经了解这个解法的思路了，下面接着看算法实现的一些具体问题和边界条件的处理。
点在多边形的边上
上面我们讲到，这个解法的主要思路就是计算射线穿越多边形边界的次数，那么对于点在多边形的边上这种特殊情况，射线出发的这一次，是否应该算作穿越呢？
看了上面的图就会发现，不管算不算穿越，都会陷入两难的境地——同样落在多边形边上的点，可能会得到相反的结果。这显然是不正确的，因此对这种特殊情况需要特殊处理。
点和多边形的顶点重合
这其实是第一种情况的一个特例。
射线经过多边形顶点
射线刚好经过多边形顶点的时候，应该算一次还是两次穿越？这种情况比前两种复杂，也是实现中的难点。
射线刚好经过多边形的一条边
这是上一种情况的特例，也就是说，射线连续经过了多边形的两个相邻顶点。
解决方案：
判断点是否在线上的方法有很多，比较简单直接的就是计算点与两个多边形顶点的连线斜率是否相等，中学数学都学过。
点和多边形顶点重合的情况更简单，直接比较点的坐标就行了。
顶点穿越看似棘手，其实我们换一个角度，思路会大不相同。先来回答一个问题，射线穿越一条线段需要什么前提条件？没错，就是线段两个端点分别在射线两侧。只要想通这一点，顶点穿越就迎刃而解了。这样一来，我们只需要规定被射线穿越的点都算作其中一侧。
如上图，假如我们规定射线经过的点都属于射线以上的一侧，显然点 D 和发生顶点穿越的点 C 都位于射线 Y 的同一侧，所以射线 Y 其实并没有穿越 CD 这条边。而点 C 和点 B 则分别位于射线 Y 的两侧，所以射线 Y 和 BC 发生了穿越，由此我们可以断定点 Y 在多边形内。同理，射线 X 分别与 AD 和 CD 都发生了穿越，因此点 X 在多边形外，而射线 Z 没有和多边形发生穿越，点 Z 位于多边形外。
解决了第三点，这一点就毫无难度了。根据上面的假设，射线连续经过的两个顶点显然都位于射线以上的一侧，因此这种情况看作没有发生穿越就可以了。由于第三点的解决方案实际上已经覆盖到这种特例，因此不需要再做特别的处理。
这种简单直观的算法通常叫做射线法或奇偶法，下面给出 JavaScript 的算法实现。
/**
* @description 射线法判断点是否在多边形内部
* @param {Object} p 待判断的点，格式：{ x: X 坐标, y: Y 坐标 }
* @param {Array} poly 多边形顶点，数组成员的格式同 p
* @return {String} 点 p 和多边形 poly 的几何关系
*/function rayCasting(p, poly) {
var px = p.x,
py = p.y,
flag = false
for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
var sx = poly[i].x,
sy = poly[i].y,
tx = poly[j].x,
ty = poly[j].y
// 点与多边形顶点重合
if((sx === px && sy === py) || (tx === px && ty === py)) {
return 'on'
}
// 判断线段两端点是否在射线两侧
if((sy < py && ty >= py) || (sy >= py && ty < py)) {
// 线段上与射线 Y 坐标相同的点的 X 坐标
var x = sx + (py - sy) * (tx - sx) / (ty - sy)
// 点在多边形的边上
if(x === px) {
return 'on'
}
// 射线穿过多边形的边界
if(x > px) {
flag = !flag
}
}
}
// 射线穿过多边形边界的次数为奇数时点在多边形内
return flag ? 'in' : 'out'}除了射线法还有很多其他的方法，下面再介绍一种回转数法。
平面中的闭合曲线关于一个点的回转数（又叫卷绕数），代表了曲线绕过该点的总次数。下面这张图动态演示了回转数的概念：图中红色曲线关于点（人所在位置）的回转数为 2。
回转数是拓扑学中的一个基本概念，具有很重要的性质和用途。本文并不打算在这一点上展开论述，这需要具备相当的数学知识，否则会非常乏味和难以理解。我们暂时只需要记住回转数的一个特性就行了：当回转数为 0 时，点在闭合曲线外部（回转数大于 0 时所代表的含义，大家可以自己想一想，还是很有趣的）。
对于给定的点和多边形，回转数应该怎么计算呢？
用线段分别连接点和多边形的全部顶点。
计算所有点与相邻顶点连线的夹角。
计算所有夹角和。注意每个夹角都是有方向的，所以有可能是负值。
最后根据角度累加值计算回转数。看过前面的介绍，很容易理解 360°（2π）相当于一次回转。
思路介绍完了，下面两点是实现中需要留意的问题。
JavaScript 的数只有 64 位双精度浮点这一种。对于三角函数产生的无理数，浮点数计算不可避免会造成一些误差，因此在最后计算回转数时需要做取整操作。
通常情况下，平面直角坐标系内一个角的取值范围是 -π 到 π 这个区间，这也是 JavaScript 三角函数
Math.atan2()返回值的范围。但 JavaScript 并不能直接计算任意两条线的夹角，我们只能先计算两条线与 X 正轴夹角，再取两者差值。这个差值的结果就有可能超出 -π 到 π 这个区间，因此我们还需要处理差值超出取值区间的情况。
这里也给出回转数法的 JavaScript 实现。
/**
* @description 回转数法判断点是否在多边形内部
* @param {Object} p 待判断的点，格式：{ x: X 坐标, y: Y 坐标 }
* @param {Array} poly 多边形顶点，数组成员的格式同 p
* @return {String} 点 p 和多边形 poly 的几何关系
*/function windingNumber(p, poly) {
var px = p.x,
py = p.y,
sum = 0
for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
var sx = poly[i].x,
sy = poly[i].y,
tx = poly[j].x,
ty = poly[j].y
// 点与多边形顶点重合或在多边形的边上
if((sx - px) * (px - tx) >= 0 && (sy - py) * (py - ty) >= 0 && (px - sx) * (ty - sy) === (py - sy) * (tx - sx)) {
return 'on'
}
// 点与相邻顶点连线的夹角
var angle = Math.atan2(sy - py, sx - px) - Math.atan2(ty - py, tx - px)
// 确保夹角不超出取值范围（-π 到 π）
if(angle >= Math.PI) {
angle = angle - Math.PI * 2
} else if(angle <= -Math.PI) {
angle = angle + Math.PI * 2
}
sum += angle
}
// 计算回转数并判断点和多边形的几何关系
return Math.round(sum / Math.PI) === 0 ? 'out' : 'in'}也有人问到像下面这种复杂多边形有没有办法？答案是肯定的。至于为什么，就留给大家思考吧。
版本：v2.4.1 (2019-11-15)
本文目标
30分钟内让你明白正则表达式是什么，并对它有一些基本的了解，让你可以在自己的程序或网页里使用它。
如何使用本教程
别被下面那些复杂的表达式吓倒，只要跟着我一步一步来，你会发现正则表达式其实并没有想像中的那么困难。当然，如果你看完了这篇教程之后，发现自己明白了很多，却又几乎什么都记不得，那也是很正常的——我认为，没接触过正则表达式的人在看完这篇教程后，能把提到过的语法记住80%以上的可能性为零。这里只是让你明白基本的原理，以后你还需要多练习，多使用，才能熟练掌握正则表达式。
除了作为入门教程之外，本文还试图成为可以在日常工作中使用的正则表达式语法参考手册。就作者本人的经历来说，这个目标还是完成得不错的——你看，我自己也没能把所有的东西记下来，不是吗？
清除格式 文本格式约定：专业术语 元字符/语法格式 正则表达式 正则表达式中的一部分(用于分析) 对其进行匹配的源字符串 对正则表达式或其中一部分的说明
隐藏边注 本文右边有一些注释，主要是用来提供一些相关信息，或者给没有程序员背景的读者解释一些基本概念，通常可以忽略。
本文介绍的大部分正则语法，在不同的正则表达式引擎中都可以使用，但也有一些会有所差异。本文介绍的是 .Net 下的正则表达式，其它环境下的具体情况可以在读完本文后去参考官方文档，或者查看正则表达式引擎特性对比。
最重要的是——请给我30分钟，如果你没有使用正则表达式的经验，请不要试图在30秒内入门——除非你是超人 :)
正则表达式到底是什么东西？
在编写处理字符串的程序或网页时，经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。
很可能你使用过Windows/Dos下用于文件查找的通配符(wildcard)，也就是*和?。如果你想查找某个目录下的所有的Word文档的话，你会搜索*.doc。在这里，*会被解释成任意的字符串。和通配符类似，正则表达式也是用来进行文本匹配的工具，只不过比起通配符，它能更精确地描述你的需求——当然，代价就是更复杂——比如你可以编写一个正则表达式，用来查找所有以0开头，后面跟着2-3个数字，然后是一个连字号“-”，最后是7或8位数字的字符串(像010-12345678或0376-7654321)。
字符是计算机软件处理文字时最基本的单位，可能是字母，数字，标点符号，空格，换行符，汉字等等。字符串是0个或更多个字符的序列。文本也就是文字，字符串。说某个字符串匹配某个正则表达式，通常是指这个字符串里有一部分（或几部分分别）能满足表达式给出的条件。
入门
学习正则表达式的最好方法是从例子开始，理解例子之后再自己对例子进行修改，实验。下面给出了不少简单的例子，并对它们作了详细的说明。
假设你在一篇英文小说里查找hi，你可以使用正则表达式hi。
这几乎是最简单的正则表达式了，它可以精确匹配这样的字符串：由两个字符组成，前一个字符是h,后一个是i。通常，处理正则表达式的工具会提供一个忽略大小写的选项，如果选中了这个选项，它可以匹配hi,HI,Hi,hI这四种情况中的任意一种。
不幸的是，很多单词里包含hi这两个连续的字符，比如him,history,high等等。用hi来查找的话，这里边的hi也会被找出来。如果要精确地查找hi这个单词的话，我们应该使用\bhi\b。
\b是正则表达式规定的一个特殊代码（好吧，某些人叫它元字符，metacharacter），代表着单词的开头或结尾，也就是单词的分界处。虽然通常英文的单词是由空格，标点符号或者换行来分隔的，但是\b并不匹配这些单词分隔字符中的任何一个，它只匹配一个位置。
如果需要更精确的说法，\b匹配这样的位置：它的前一个字符和后一个字符不全是(一个是,一个不是或不存在)\w。
假如你要找的是hi后面不远处跟着一个Lucy，你应该用\bhi\b.*\bLucy\b。
这里，.是另一个元字符，匹配除了换行符以外的任意字符。*同样是元字符，不过它代表的不是字符，也不是位置，而是数量——它指定*前边的内容可以连续重复使用任意次以使整个表达式得到匹配。因此，.*连在一起就意味着任意数量的不包含换行的字符。现在\bhi\b.*\bLucy\b的意思就很明显了：先是一个单词hi,然后是任意个任意字符(但不能是换行)，最后是Lucy这个单词。
换行符就是'\n',ASCII编码为10(十六进制0x0A)的字符。
如果同时使用其它元字符，我们就能构造出功能更强大的正则表达式。比如下面这个例子：
0\d\d-\d\d\d\d\d\d\d\d匹配这样的字符串：以0开头，然后是两个数字，然后是一个连字号“-”，最后是8个数字(也就是中国的电话号码。当然，这个例子只能匹配区号为3位的情形)。
这里的\d是个新的元字符，匹配一位数字(0，或1，或2，或……)。-不是元字符，只匹配它本身——连字符(或者减号，或者中横线，或者随你怎么称呼它)。
为了避免那么多烦人的重复，我们也可以这样写这个表达式：0\d{2}-\d{8}。这里\d后面的{2}({8})的意思是前面\d必须连续重复匹配2次(8次)。
测试正则表达式
如果你不觉得正则表达式很难读写的话，要么你是一个天才，要么，你不是地球人。正则表达式的语法很令人头疼，即使对经常使用它的人来说也是如此。由于难于读写，容易出错，所以找一种工具对正则表达式进行测试是很有必要的。
不同的环境下正则表达式的一些细节是不相同的，本教程介绍的是微软 .Net Framework 4.x 下正则表达式的行为，所以，我向你推荐我编写的.Net下的工具 Regester。请参考该页面的说明来安装和运行该软件。
下面是Regester运行时的截图：
你也可以试试这个在线测试工具：Wegester, JavaScript正则表达式测试器。
元字符
现在你已经知道几个很有用的元字符了，如\b,.,*，还有\d.正则表达式里还有更多的元字符，比如\s匹配任意的空白符，包括空格，制表符(Tab)，换行符，中文全角空格等。\w匹配字母或数字或下划线或汉字等。
对中文/汉字的特殊处理是由.Net提供的正则表达式引擎支持的，其它环境下的具体情况请查看相关文档。
下面来看看更多的例子：
\ba\w*\b匹配以字母a开头的单词——先是某个单词开始处(\b)，然后是字母a,然后是任意数量的字母或数字(\w*)，最后是单词结束处(\b)。
\d+匹配1个或更多连续的数字。这里的+是和*类似的元字符，不同的是*匹配重复任意次(可能是0次)，而+则匹配重复1次或更多次。
\b\w{6}\b 匹配刚好6个字符的单词。
好吧，现在我们说说正则表达式里的单词是什么意思吧：就是不少于一个的连续的\w。不错，这与学习英文时要背的成千上万个同名的东西的确关系不大 :)
| 代码 | 说明 |
|---|---|
| . | 匹配除换行符以外的任意字符 |
| \w | 匹配字母或数字或下划线或汉字 |
| \s | 匹配任意的空白符 |
| \d | 匹配数字 |
| \b | 匹配单词的开始或结束 |
| ^ | 匹配字符串的开始 |
| $ | 匹配字符串的结束 |
元字符^（和数字6在同一个键位上的符号）和$都匹配一个位置，这和\b有点类似。^匹配你要用来查找的字符串的开头，$匹配结尾。这两个代码在验证输入的内容时非常有用，比如一个网站如果要求你填写的QQ号必须为5位到12位数字时，可以使用：^\d{5,12}$。
这里的{5,12}和前面介绍过的{2}是类似的，只不过{2}匹配只能不多不少重复2次，{5,12}则是重复的次数不能少于5次，不能多于12次，否则都不匹配。
因为使用了^和$，所以输入的整个字符串都要用来和\d{5,12}来匹配，也就是说整个输入必须是5到12个数字，因此如果输入的QQ号能匹配这个正则表达式的话，那就符合要求了。
和忽略大小写的选项类似，有些正则表达式处理工具还有一个处理多行的选项。如果选中了这个选项，^和$的意义就变成了匹配行的开始处和结束处。
正则表达式引擎通常会提供一个“测试指定的字符串是否匹配一个正则表达式”的方法，如JavaScript里的RegExp.test()方法或.NET里的Regex.IsMatch()方法。这里的匹配是指是字符串里有没有符合表达式规则的部分。如果不使用^和$的话，对于\d{5,12}而言，使用这样的方法就只能保证字符串里包含5到12连续位数字，而不是整个字符串就是5到12位数字。
字符转义
如果你想查找元字符本身的话，比如你查找.,或者*,就出现了问题：你没办法指定它们，因为它们会被解释成别的意思。这时你就得使用\来取消这些字符的特殊意义。因此，你应该使用\.和\*。当然，要查找\本身，你也得用\\.
例如：deerchao\.cn匹配deerchao.cn，C:\\Windows匹配C:\Windows。
重复
你已经看过了前面的*,+,{2},{5,12}这几个匹配重复的方式了。下面是正则表达式中所有的限定符(指定数量的代码，例如*,{5,12}等)：
| 代码/语法 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
下面是一些使用重复的例子：
Windows\d+匹配Windows后面跟1个或更多数字
^\w+匹配一行的第一个单词(或整个字符串的第一个单词，具体匹配哪个意思得看选项设置)
字符类
要想查找数字，字母或数字，空白是很简单的，因为已经有了对应这些字符集合的元字符，但是如果你想匹配没有预定义元字符的字符集合(比如元音字母a,e,i,o,u),应该怎么办？
很简单，你只需要在方括号里列出它们就行了，像[aeiou]就匹配任何一个英文元音字母，[.?!]匹配标点符号(.或?或!)。
我们也可以轻松地指定一个字符范围，像[0-9]代表的含意与\d就是完全一致的：一位数字；同理[a-z0-9A-Z_]也完全等同于\w（如果只考虑英文的话）。
下面是一个更复杂的表达式：\(?0\d{2}[) -]?\d{8}。
这个表达式可以匹配几种格式的电话号码，像(010)88886666，或022-22334455，或02912345678等。我们对它进行一些分析吧：首先是一个转义字符\(,它能出现0次或1次(?),然后是一个0，后面跟着2个数字(\d{2})，然后是)或-或空格中的一个，它出现1次或不出现(?)，最后是8个数字(\d{8})。
“(”和“)”也是元字符，后面的分组节里会提到，所以在这里需要使用转义。
分枝条件
不幸的是，刚才那个表达式也能匹配010)12345678或(022-87654321这样的“不正确”的格式。要解决这个问题，我们需要用到分枝条件。正则表达式里的分枝条件指的是有几种规则，如果满足其中任意一种规则都应该当成匹配，具体方法是用|把不同的规则分隔开。听不明白？没关系，看例子：
0\d{2}-\d{8}|0\d{3}-\d{7}这个表达式能匹配两种以连字号分隔的电话号码：一种是三位区号，8位本地号(如010-12345678)，一种是4位区号，7位本地号(0376-2233445)。
\(0\d{2}\)[- ]?\d{8}|0\d{2}[- ]?\d{8}这个表达式匹配3位区号的电话号码，其中区号可以用小括号括起来，也可以不用，区号与本地号间可以用连字号或空格间隔，也可以没有间隔。你可以试试用分枝条件把这个表达式扩展成也支持4位区号的。
\d{5}-\d{4}|\d{5}这个表达式用于匹配美国的邮政编码。美国邮编的规则是5位数字，或者用连字号间隔的9位数字。之所以要给出这个例子是因为它能说明一个问题：使用分枝条件时，要注意各个条件的顺序。如果你把它改成\d{5}|\d{5}-\d{4}的话，那么就只会匹配5位的邮编(以及9位邮编的前5位)。原因是匹配分枝条件时，将会从左到右地测试每个条件，如果满足了某个分枝的话，就不会去再管其它的条件了。
分组
我们已经提到了怎么重复单个字符（直接在字符后面加上限定符就行了）；但如果想要重复多个字符又该怎么办？你可以用小括号来指定子表达式(也叫做分组)，然后你就可以指定这个子表达式的重复次数了，你也可以对子表达式进行其它一些操作(后面会有介绍)。
(\d{1,3}\.){3}\d{1,3}是一个简单的IP地址匹配表达式。要理解这个表达式，请按下列顺序分析它：\d{1,3}匹配1到3位的数字，(\d{1,3}\.){3}匹配三位数字加上一个英文句号(这个整体也就是这个分组)重复3次，最后再加上一个一到三位的数字(\d{1,3})。
不幸的是，它也将匹配256.300.888.999这种不可能存在的IP地址。如果能使用算术比较的话，或许能简单地解决这个问题，但是正则表达式中并不提供关于数学的任何功能，所以只能使用冗长的分组，选择，字符类来描述一个正确的IP地址：((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)。
理解这个表达式的关键是理解2[0-4]\d|25[0-5]|[01]?\d\d?，这里我就不细说了，你自己应该能分析得出来它的意义。
IP地址中每个数字都不能大于255. 经常有人问我, 01.02.03.04 这样前面带有0的数字, 是不是正确的IP地址呢? 答案是: 是的, IP 地址里的数字可以包含有前导 0 (leading zeroes).
反义
有时需要查找不属于某个能简单定义的字符类的字符。比如想查找除了数字以外，其它任意字符都行的情况，这时需要用到反义：
| 代码/语法 | 说明 |
|---|---|
| \W | 匹配任意不是字母，数字，下划线，汉字的字符 |
| \S | 匹配任意不是空白符的字符 |
| \D | 匹配任意非数字的字符 |
| \B | 匹配不是单词开头或结束的位置 |
| [^x] | 匹配除了x以外的任意字符 |
| [^aeiou] | 匹配除了aeiou这几个字母以外的任意字符 |
例子：\S+匹配不包含空白符的字符串。
<a[^>]+>匹配用尖括号括起来的以a开头的字符串。
后向引用
使用小括号指定一个子表达式后，匹配这个子表达式的文本(也就是此分组捕获的内容)可以在表达式或其它程序中作进一步的处理。默认情况下，每个分组会自动拥有一个组号，规则是：从左向右，以分组的左括号为标志，第一个出现的分组的组号为1，第二个为2，以此类推。
呃……其实,组号分配还不像我刚说得那么简单：
分组0对应整个正则表达式
实际上组号分配过程是要从左向右扫描两遍的：第一遍只给未命名组分配，第二遍只给命名组分配－－因此所有命名组的组号都大于未命名的组号
你可以使用(?:exp)这样的语法来剥夺一个分组对组号分配的参与权．
后向引用用于重复搜索前面某个分组匹配的文本。例如，\1代表分组1匹配的文本。难以理解？请看示例：
\b(\w+)\b\s+\1\b可以用来匹配重复的单词，像go go, 或者kitty kitty。这个表达式首先是一个单词，也就是单词开始处和结束处之间的多于一个的字母或数字(\b(\w+)\b)，这个单词会被捕获到编号为1的分组中，然后是1个或几个空白符(\s+)，最后是分组1中捕获的内容（也就是前面匹配的那个单词）(\1)。
你也可以自己指定子表达式的组名。要指定一个子表达式的组名，请使用这样的语法：(?<Word>\w+)(或者把尖括号换成'也行：(?'Word'\w+)),这样就把\w+的组名指定为Word了。要反向引用这个分组捕获的内容，你可以使用\k<Word>,所以上一个例子也可以写成这样：\b(?<Word>\w+)\b\s+\k<Word>\b。
使用小括号的时候，还有很多特定用途的语法。下面列出了最常用的一些：
| 分类 | 代码/语法 | 说明 |
|---|---|---|
| 捕获 | (exp) | 匹配exp,并捕获文本到自动命名的组里 |
| (?<name>exp) | 匹配exp,并捕获文本到名称为name的组里，也可以写成(?'name'exp) | |
| (?:exp) | 匹配exp,不捕获匹配的文本，也不给此分组分配组号 | |
| 零宽断言 | (?=exp) | 匹配exp前面的位置 |
| (?<=exp) | 匹配exp后面的位置 | |
| (?!exp) | 匹配后面跟的不是exp的位置 | |
| (?<!exp) | 匹配前面不是exp的位置 | |
| 注释 | (?#comment) | 这种类型的分组不对正则表达式的处理产生任何影响，用于提供注释让人阅读 |
我们已经讨论了前两种语法。第三个(?:exp)不会改变正则表达式的处理方式，只是这样的组匹配的内容不会像前两种那样被捕获到某个组里面，也不会拥有组号。“我为什么会想要这样做？”——好问题，你觉得为什么呢？
零宽断言
接下来的四个用于查找在某些内容(但并不包括这些内容)之前或之后的东西，也就是说它们像\b,^,$那样用于指定一个位置，这个位置应该满足一定的条件(即断言)，因此它们也被称为零宽断言。最好还是拿例子来说明吧：
断言用来声明一个应该为真的事实。正则表达式中只有当断言为真时才会继续进行匹配。
(?=exp)也叫零宽度正预测先行断言，它断言自身出现的位置的后面能匹配表达式exp。比如\b\w+(?=ing\b)，匹配以ing结尾的单词的前面部分(除了ing以外的部分)，如查找I'm singing while you're dancing.时，它会匹配sing和danc。
(?<=exp)也叫零宽度正回顾后发断言，它断言自身出现的位置的前面能匹配表达式exp。比如(?<=\bre)\w+\b会匹配以re开头的单词的后半部分(除了re以外的部分)，例如在查找reading a book时，它匹配ading。
假如你想要给一个很长的数字中每三位间加一个逗号(当然是从右边加起了)，你可以这样查找需要在前面和里面添加逗号的部分：((?<=\d)\d{3})+\b，用它对1234567890进行查找时结果是234567890。
下面这个例子同时使用了这两种断言：(?<=\s)\d+(?=\s)匹配以空白符间隔的数字(再次强调，不包括这些空白符)。
负向零宽断言
前面我们提到过怎么查找不是某个字符或不在某个字符类里的字符的方法(反义)。但是如果我们只是想要确保某个字符没有出现，但并不想去匹配它时怎么办？例如，如果我们想查找这样的单词--它里面出现了字母q,但是q后面跟的不是字母u,我们可以尝试这样：
\b\w*q[^u]\w*\b匹配包含后面不是字母u的字母q的单词。但是如果多做测试(或者你思维足够敏锐，直接就观察出来了)，你会发现，如果q出现在单词的结尾的话，像Iraq,Benq，这个表达式就会出错。这是因为[^u]总要匹配一个字符，所以如果q是单词的最后一个字符的话，后面的[^u]将会匹配q后面的单词分隔符(可能是空格，或者是句号或其它的什么)，后面的\w*\b将会匹配下一个单词，于是\b\w*q[^u]\w*\b就能匹配整个Iraq fighting。负向零宽断言能解决这样的问题，因为它只匹配一个位置，并不消费任何字符。现在，我们可以这样来解决这个问题：\b\w*q(?!u)\w*\b。
零宽度负预测先行断言(?!exp)，断言此位置的后面不能匹配表达式exp。例如：\d{3}(?!\d)匹配三位数字，而且这三位数字的后面不能是数字；\b((?!abc)\w)+\b匹配不包含连续字符串abc的单词。
同理，我们可以用(?<!exp),零宽度负回顾后发断言来断言此位置的前面不能匹配表达式exp：(?<![a-z])\d{7}匹配前面不是小写字母的七位数字。
一个更复杂的例子：(?<=<(\w+)>).*(?=<\/\1>)匹配不包含属性的简单HTML标签内里的内容。(?<=<(\w+)>)指定了这样的前缀：被尖括号括起来的单词(比如可能是<b>)，然后是.*(任意的字符串),最后是一个后缀(?=<\/\1>)。注意后缀里的\/，它用到了前面提过的字符转义；\1则是一个反向引用，引用的正是捕获的第一组，前面的(\w+)匹配的内容，这样如果前缀实际上是<b>的话，后缀就是</b>了。整个表达式匹配的是<b>和</b>之间的内容(再次提醒，不包括前缀和后缀本身)。
注释
小括号的另一种用途是通过语法(?#comment)来包含注释。例如：2[0-4]\d(?#200-249)|25[0-5](?#250-255)|[01]?\d\d?(?#0-199)。
要包含注释的话，最好是启用“忽略模式里的空白符”选项，这样在编写表达式时能任意的添加空格，Tab，换行，而实际使用时这些都将被忽略。启用这个选项后，在#后面到这一行结束的所有文本都将被当成注释忽略掉。例如，我们可以前面的一个表达式写成这样：
(?<= # 断言要匹配的文本的前缀 <(\w+)> # 查找尖括号括起来的内容 # (即HTML/XML标签) ) # 前缀结束 .* # 匹配任意文本 (?= # 断言要匹配的文本的后缀 <\/\1> # 查找尖括号括起来的内容 # 查找尖括号括起来的内容 ) # 后缀结束
贪婪与懒惰
当正则表达式中包含能接受重复的限定符时，通常的行为是（在使整个表达式能得到匹配的前提下）匹配尽可能多的字符。以这个表达式为例：a.*b，它将会匹配最长的以a开始，以b结束的字符串。如果用它来搜索aabab的话，它会匹配整个字符串aabab。这被称为贪婪匹配。
有时，我们更需要懒惰匹配，也就是匹配尽可能少的字符。前面给出的限定符都可以被转化为懒惰匹配模式，只要在它后面加上一个问号?。这样.*?就意味着匹配任意数量的重复，但是在能使整个匹配成功的前提下使用最少的重复。现在看看懒惰版的例子吧：
a.*?b匹配最短的，以a开始，以b结束的字符串。如果把它应用于aabab的话，它会匹配aab（第一到第三个字符）和ab（第四到第五个字符）。
为什么第一个匹配是aab（第一到第三个字符）而不是ab（第二到第三个字符）？简单地说，因为正则表达式有另一条规则，比懒惰／贪婪规则的优先级更高：最先开始的匹配拥有最高的优先权——The match that begins earliest wins。
| 代码/语法 | 说明 |
|---|---|
| *? | 重复任意次，但尽可能少重复 |
| +? | 重复1次或更多次，但尽可能少重复 |
| ?? | 重复0次或1次，但尽可能少重复 |
| {n,m}? | 重复n到m次，但尽可能少重复 |
| {n,}? | 重复n次以上，但尽可能少重复 |
处理选项
上面介绍了几个选项如忽略大小写，处理多行等，这些选项能用来改变处理正则表达式的方式。下面是.Net中常用的正则表达式选项：
| 名称 | 说明 |
|---|---|
| IgnoreCase(忽略大小写) | 匹配时不区分大小写。 |
| Multiline(多行模式) | 更改^和$的含义，使它们分别在任意一行的行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配。(在此模式下,$的精确含意是:匹配\n之前的位置以及字符串结束前的位置.) |
| Singleline(单行模式) | 更改.的含义，使它与每一个字符匹配（包括换行符\n）。 |
| IgnorePatternWhitespace(忽略空白) | 忽略表达式中的非转义空白并启用由#标记的注释。 |
| ExplicitCapture(显式捕获) | 仅捕获已被显式命名的组。 |
在C#中，你可以使用Regex(String, RegexOptions)构造函数来设置正则表达式的处理选项。如：Regex regex = new Regex(@"\ba\w{6}\b", RegexOptions.IgnoreCase);
一个经常被问到的问题是：是不是只能同时使用多行模式和单行模式中的一种？答案是：不是。这两个选项之间没有任何关系，除了它们的名字比较相似（以至于让人感到疑惑）以外。事实上，为了避免混淆，在最新的 JavaScript 中，单行模式其实名叫 dotAll，意为点可以匹配所有字符，然而在指定该选项时，用的还是 Singleline 的首字母 s.
目前（2019/06），只有基于 Webkit/Chromium 的浏览器（如 Chrome, Safari等）才支持 dotAll 选项。
平衡组/递归匹配
有时我们需要匹配像( 100 * ( 50 + 15 ) )这样的可嵌套的层次性结构，这时简单地使用\(.+\)则只会匹配到最左边的左括号和最右边的右括号之间的内容(这里我们讨论的是贪婪模式，懒惰模式也有下面的问题)。假如原来的字符串里的左括号和右括号出现的次数不相等，比如( 5 / ( 3 + 2 ) ) )，那我们的匹配结果里两者的个数也不会相等。有没有办法在这样的字符串里匹配到最长的，配对的括号之间的内容呢？
这里介绍的平衡组语法是由.Net Framework支持的；其它语言／库不一定支持这种功能，或者支持此功能但需要使用不同的语法。
为了避免(和\(把你的大脑彻底搞糊涂，我们还是用尖括号代替圆括号吧。现在我们的问题变成了如何把xx <aa <bbb> <bbb> aa> yy这样的字符串里，最长的配对的尖括号内的内容捕获出来？
这里需要用到以下的语法构造：
(?'group') 把捕获的内容命名为group,并压入堆栈(Stack)
(?'-group') 从堆栈上弹出最后压入堆栈的名为group的捕获内容，如果堆栈本来为空，则本分组的匹配失败
(?(group)yes|no) 如果堆栈上存在以名为group的捕获内容的话，继续匹配yes部分的表达式，否则继续匹配no部分
(?!) 零宽负向先行断言，由于没有后缀表达式，试图匹配总是失败
我们需要做的是每碰到了左括号，就在压入一个"Open",每碰到一个右括号，就弹出一个，到了最后就看看堆栈是否为空－－如果不为空那就证明左括号比右括号多，那匹配就应该失败。正则表达式引擎会进行回溯(放弃最前面或最后面的一些字符)，尽量使整个表达式得到匹配。
< #最外层的左括号 [^<>]* #它后面非括号的内容 ( ( (?'Open'<) #左括号，压入"Open" [^<>]* #左括号后面的内容 )+ ( (?'-Open'>) #右括号，弹出一个"Open" [^<>]* #右括号后面的内容 )+ )* (?(Open)(?!)) #最外层的右括号前检查 #若还有未弹出的"Open" #则匹配失败 > #最外层的右括号
平衡组的一个最常见的应用就是匹配HTML,下面这个例子可以匹配嵌套的<div>标签：<div[^>]*>[^<>]*(((?'Open'<div[^>]*>)[^<>]*)+((?'-Open'</div>)[^<>]*)+)*(?(Open)(?!))</div>.
如果你不是一个程序员（或者你自称程序员但是不知道堆栈是什么东西），你就这样理解上面的三种语法吧：第一个就是在黑板上写一个"group"，第二个就是从黑板上擦掉一个"group"，第三个就是看黑板上写的还有没有"group"，如果有就继续匹配yes部分，否则就匹配no部分。
还有些什么东西没提到
上边已经描述了构造正则表达式的大量元素，但是还有很多没有提到的东西。下面是一些未提到的元素的列表，包含语法和简单的说明。你可以在网上找到更详细的参考资料来学习它们--当你需要用到它们的时候。如果你安装了MSDN Library,你也可以在里面找到.Net下正则表达式详细的文档。这里的介绍很简略，如果你需要更详细的信息，而又没有在电脑上安装MSDN Library,可以查看关于正则表达式语言元素的MSDN在线文档。
| 代码/语法 | 说明 |
|---|---|
| \a | 报警字符(打印它的效果是电脑嘀一声) |
| \b | 通常是单词分界位置，但如果在字符类里使用代表退格 |
| \t | 制表符，Tab |
| \r | 回车 |
| \v | 竖向制表符 |
| \f | 换页符 |
| \n | 换行符 |
| \e | Escape |
| \0nn | ASCII代码中八进制代码为nn的字符 |
| \xnn | ASCII代码中十六进制代码为nn的字符 |
| \unnnn | Unicode代码中十六进制代码为nnnn的字符 |
| \cN | ASCII控制字符。比如\cC代表Ctrl+C |
| \A | 字符串开头(类似^，但不受处理多行选项的影响) |
| \Z | 字符串结尾或行尾(不受处理多行选项的影响) |
| \z | 字符串结尾(类似$，但不受处理多行选项的影响) |
| \G | 当前搜索的开头 |
| \p{name} | Unicode中命名为name的字符类，例如\p{IsGreek} |
| (?>exp) | 贪婪子表达式 |
| (?<x>-<y>exp) | 平衡组 |
| (?im-nsx:exp) | 在子表达式exp中改变处理选项 |
| (?im-nsx) | 为表达式后面的部分改变处理选项 |
| (?(exp)yes|no) | 把exp当作零宽正向先行断言，如果在这个位置能匹配，使用yes作为此组的表达式；否则使用no |
| (?(exp)yes) | 同上，只是使用空表达式作为no |
| (?(name)yes|no) | 如果命名为name的组捕获到了内容，使用yes作为表达式；否则使用no |
| (?(name)yes) | 同上，只是使用空表达式作为no |
联系作者
好吧，我承认，我骗了你，读到这里你肯定花了不止30分钟。相信我，这是我的错，而不是因为你太笨。我之所以说"30分钟"，是为了让你有信心，有耐心继续下去。既然你看到了这里，那证明我的阴谋成功了。被忽悠的感觉很爽吧？
要投诉我，或者觉得我其实可以忽悠得更高明，或者有关于正则表达式的问题, 可以发邮件到 deerchao#qq#com。如果本文给了你帮助，你可以使用支付宝或微信支付向我打赏。点击本页右上方的“打赏”即可看到支付二维码，可能你得先回到页面最顶端。
网上的资源及本文参考文献
更新纪录
2006-3-27 第一版
2006-10-12 第二版
修正了几个细节上的错误和不准确的地方
增加了对处理中文时的一些说明
更改了几个术语的翻译（采用了MSDN的翻译方式）
增加了平衡组的介绍
放弃了对The Regulator的介绍，改用Regex Tester
2007-3-12 V2.1
修正了几个小的错误
增加了对处理选项(RegexOptions)的介绍
2007-5-28 V2.2
重新组织了对零宽断言的介绍
删除了几个不太合适的示例，添加了几个实用的示例
其它一些微小的更改
2007-8-3 V2.21
修改了几处文字错误
修改/添加了对$,\b的精确说明
承认了作者是个骗子
给RegexTester添加了Singleline选项的相关功能
2008-4-13 v2.3
调整了部分章节的次序
修改了页面布局，删除了专门的参考节
针对读者的反馈，调整了部分内容
2009-4-11 v2.3.1
修改了几处文字错误
添加了一些注释说明
调整了一些措词
2011-8-17 v2.3.2
更改了工具介绍，换用自行开发的正则表达式测试器
2013-1-10 v2.3.3
说明包含前导0的IP地址是合法的
2017-6-6 v2.3.4
更新测试工具
2017-6-12 v2.3.5
修复分支条件章节下的错误(删除括号后的问号)
2019-6-28 v2.4
提供在线 Javascript 正则表达式测试工具
提到 Javascript 中的 dotAll 模式
修改作者联系方式
2019-11-15 v2.4.1
改进在手机浏览器下的页面布局
当使用在线编辑器编辑一篇文章（或从 Word 复制）后，会得到包含 HTML 标签的字符串内容，可以直接将它输出到页面上而不需要进行 HTML 编码。
但是，当我们需要改变图片大小时，我们发现有些图片的尺寸是直接使用 style 属性固定的，除了用 JS 进行后期处理，我们可以在服务端对 <img /> 进行修正。
这个场景会在小程序开发的时候遇到。
我们可以在客户端用 JS 进行处理，也可以在服务端用类似的方法处理（使用正则表达式）。参此文
这里使用 HtmlAgilityPack 通过递归节点来处理：
/// <summary>
/// 给所有指定节点添加样式
/// </summary>
/// <param name="html"></param>
/// <param name="tag">节点名称（小写），如：img</param>
/// <param name="styles">要添加的样式，如：max-width:100%;</param>
/// <returns></returns>
public static string AddStyleToHtmlNode(string html, string tag, string styles)
{
HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(html);
for (var i = 0; i < doc.DocumentNode.ChildNodes.Count; i++)
{
doc.DocumentNode.ChildNodes[i] = AddStyleToHtmlNode(doc.DocumentNode.ChildNodes[i], tag, styles);
}
return doc.DocumentNode.OuterHtml;
}
private static HtmlNode AddStyleToHtmlNode(HtmlNode node, string tag, string styles)
{
if (node.Name == tag)
{
var style = node.GetAttributeValue("style", null);
node.SetAttributeValue("style", ((string.IsNullOrWhiteSpace(style) ? "" : style.Trim() + ";") + styles).Replace(";;", ";"));
}
for (var i = 0; i < node.ChildNodes.Count; i++)
{
node.ChildNodes[i] = AddStyleToHtmlNode(node.ChildNodes[i], tag, styles);
}
return node;
}直接调用：
Content = zStringHTML_190126.AddStyleToHtmlNode(Content, "img", "max-width:100%;height:auto;");当使用在线编辑器编辑一篇文章（或从 Word 复制）后，会得到包含 HTML 标签的字符串内容，可以直接将它输出到页面上而不需要进行 HTML 编码。
但是，当我们需要改变图片大小时，我们发现有些图片的尺寸是直接使用 style 属性固定的，除了用 JS 进行后期处理，我们可以在服务端对 <img /> 进行修正。
这个场景会在小程序开发的时候遇到。
网上一般使用正则表达式直接将 <img 替换成 <img style="max-width: 100%; height: auto;" ，缺点是如果该 <img /> 本身就带有 style 属性，那么会出现一个标签两个 style，很多情况导致这两个样式同时失效，所以我们应针对有 style 和无 style 分别处理。
// 把 <img src="a.jpg" style="display: block;" /> 替换成 <img src="a.jpg" style="display: block;;max-width:100%;height:auto;" />
Content = Content.replace(/(\<img\s+[^>]*style\s*\=\s*['"][^'"]*)(['"])/gi, '$1;max-width:100%;height:auto;$2');
// 把 <img src="b.jpg" /> 替换成 <img src="b.jpg" style="max-width:100%;height:auto;" />
Content = Content.replace(/(\<img\s+((?!style).)+?)(\/?>)/gi, '$1 style="max-width:100%;height:auto;" $3');复制以上代码时，半角空格可能会变成全角空格，请注意修正。
当有 style 时，我们将 max-width: 100%; height: auto;追加在原样式之后，以重写原样式。这里没有直接判断原样式是否以 ; 结尾，而是直接追加 ;，这并不会影响实现展示效果。
在判断没有 style 用到正则表达式的“断言”，参：https://blog.csdn.net/xuyangxinlei/article/details/81359366
| xhEditor | KindEditor | CKEditor | 百度 UEditor | |
| 1.1.14 | 4.1.3 | 3.6.4 | 1.4.3.2 | |
| 分页功能 | × | √ | √ | √ |
| 表格右键功能（添加删除列、合并单元格等） | × | √ | √ | √ |
| HTML5下能直接从本地拖曳至浏览器上传图片 | √ | × | × | √ |
| 远程图片抓取 | √ | × | × | √ |
| Word 图片转存 | × | × | × | √ |
| 直接粘贴剪切板中的图片（指类似屏幕截图，不指网页上图片右键复制，因为后者属于“远程图片抓取”） | √ | × | × | √ |
| 本地草稿 | × | × | × | √ |
上表中的部分功能可能需要通过配置或安装插件来实现。
本文编辑时间为2012年10月7日，文中若有错误或编辑器的新版本支持了上述功能，请通过QQ940534113告诉我。
非常感谢您的支持！
Code 128 条形码可以表示全部 128 个 ASCII 码字符（数字、大小写字母、符号和控制符）。
Code 128 有三个子集：Code 128A、Code 128B 和 Code 128C。
Code 128A 用来编码数字、大写字母、控制符、部分符号；
Code 128B 用来编码数字、大写字母、小写字母、符号；
Code 128C 用来编码 2 位数字 [00,99]。
码条大小有 4 种，按照宽度，我们用 1、2、3、4 来表示。
一个完整的 Code 128 条码是由：起始符、字符串、检验位、终止符组成的。
每个字符由 3 个条、3 个空、11 个单元构成，字符串可变长。
黑色线条用 B（Bar）表示，白色空位用 S（Space）表示，那么一个字符是由 BSBSBS 组成的。
起始符有三种，“CODE-A”、“CODE-B”和“CODE-C”。起始符的类型决定了后面字符的构成。
当采用码来设置字符时（CODE-A、CODE-B 和 CODE-C），起始符为 CODE-A 的条码在条码的处理中可以变为采用 CODE-B 或 CODE-C 栏的字符。
当采用“SHIFT”时，只有紧靠 SHIFT 的一个字符可以在下一栏被变更（A 到 B，B 到 C，C 到 A）。（和电脑键盘上的 SHIFT 键操作类似）
校验字符通过 MOD103 算法，下面举例说明：
例 1：xoyozo.net
信息：StartB x o y o z o . n e t
值：104 88 79 89 79 90 79 14 78 69 84
位置：- 1 2 3 4 5 6 7 8 9 10
计算：104 + 88 * 1+ 79 * 2 + 89 * 3 + 79 * 4 +90 * 5 + 79 * 6 + 14 * 7 + 78 * 8 + 69 * 9 + 84 * 10 = 4040
取模：4040 % 103 = 23
完整的条形码信息： (Start B)xoyozo.net(7)(STOP)
例 2：C08244
信息：StartB C 0 CodeC 82 44
值：104 35 16 99 82 44
位置：- 1 2 3 4 5 6
计算：104 + 35 * 1+ 16 * 2 + 99 * 3 + 82 * 4 +44 * 5 = 1016
取模：1016 % 103 = 89
完整的条形码信息： (Start B)C0(CodeC)8244(y)(STOP)
在线示例：https://xoyozo.net/Tools/Code128
附 Code 128 编码表：
| Value | Code A | Code B | Code C | Pattern | ASCII Code |
| BSBSBS | |||||
| 0 | SP | SP | 00 | 212222 | SP (ASCII 32) |
| 1 | ! | ! | 01 | 222122 | ! (ASCII 33) |
| 2 | " | " | 02 | 222221 | " (ASCII 34) |
| 3 | # | # | 03 | 121223 | # (ASCII 35) |
| 4 | $ | $ | 04 | 121322 | $ (ASCII 36) |
| 5 | % | % | 05 | 131222 | % (ASCII 37) |
| 6 | & | & | 06 | 122213 | & (ASCII 38) |
| 7 | ' | ' | 07 | 122312 | ' (ASCII 39) |
| 8 | ( | ( | 08 | 132212 | ( (ASCII 40) |
| 9 | ) | ) | 09 | 221213 | ) (ASCII 41) |
| 10 | * | * | 10 | 221312 | * (ASCII 42) |
| 11 | + | + | 11 | 231212 | + (ASCII 43) |
| 12 | , | , | 12 | 112232 | , (ASCII 44) |
| 13 | - | - | 13 | 122132 | - (ASCII 45) |
| 14 | . | . | 14 | 122231 | . (ASCII 46) |
| 15 | / | / | 15 | 113222 | / (ASCII 47) |
| 16 | 0 | 0 | 16 | 123122 | 0 (ASCII 48) |
| 17 | 1 | 1 | 17 | 123221 | 1(ASCII 49) |
| 18 | 2 | 2 | 18 | 223211 | 2 (ASCII 50) |
| 19 | 3 | 3 | 19 | 221132 | 3 (ASCII 51) |
| 20 | 4 | 4 | 20 | 221231 | 4 (ASCII 52) |
| 21 | 5 | 5 | 21 | 213212 | 5 (ASCII 53) |
| 22 | 6 | 6 | 22 | 223112 | 6 (ASCII 54) |
| 23 | 7 | 7 | 23 | 312131 | 7 (ASCII 55) |
| 24 | 8 | 8 | 24 | 311222 | 8 (ASCII 56) |
| 25 | 9 | 9 | 25 | 321122 | 9 (ASCII 57) |
| 26 | : | : | 26 | 321221 | : (ASCII 58) |
| 27 | ; | ; | 27 | 312212 | ; (ASCII 59) |
| 28 | < | < | 28 | 322112 | < (ASCII 60) |
| 29 | = | = | 29 | 322211 | = (ASCII 61) |
| 30 | > | > | 30 | 212123 | > (ASCII 62) |
| 31 | ? | ? | 31 | 212321 | ? (ASCII 63) |
| 32 | @ | @ | 32 | 232121 | @ (ASCII 64) |
| 33 | A | A | 33 | 111323 | A (ASCII 65) |
| 34 | B | B | 34 | 131123 | B (ASCII 66) |
| 35 | C | C | 35 | 131321 | C (ASCII 67) |
| 36 | D | D | 36 | 112313 | D (ASCII 68) |
| 37 | E | E | 37 | 132113 | E (ASCII 69) |
| 38 | F | F | 38 | 132311 | F (ASCII 70) |
| 39 | G | G | 39 | 211313 | G (ASCII 71) |
| 40 | H | H | 40 | 231113 | H (ASCII 72) |
| 41 | I | I | 41 | 231311 | I (ASCII 73) |
| 42 | J | J | 42 | 112133 | J (ASCII 74) |
| 43 | K | K | 43 | 112331 | K (ASCII 75) |
| 44 | L | L | 44 | 132131 | L (ASCII 76) |
| 45 | M | M | 45 | 113123 | M (ASCII 77) |
| 46 | N | N | 46 | 113321 | N (ASCII 78) |
| 47 | O | O | 47 | 133121 | O (ASCII 79) |
| 48 | P | P | 48 | 313121 | P (ASCII 80) |
| 49 | Q | Q | 49 | 211331 | Q (ASCII 81) |
| 50 | R | R | 50 | 231131 | R (ASCII 82) |
| 51 | S | S | 51 | 213113 | S (ASCII 83) |
| 52 | T | T | 52 | 213311 | T (ASCII 84) |
| 53 | U | U | 53 | 213131 | U (ASCII 85) |
| 54 | V | V | 54 | 311123 | V (ASCII 86) |
| 55 | W | W | 55 | 311321 | W (ASCII 87) |
| 56 | X | X | 56 | 331121 | X (ASCII 88) |
| 57 | Y | Y | 57 | 312113 | Y (ASCII 89) |
| 58 | Z | Z | 58 | 312311 | Z (ASCII 90) |
| 59 | [ | [ | 59 | 332111 | [ (ASCII 91) |
| 60 | \ | \ | 60 | 314111 | \ (ASCII 92) |
| 61 | ] | ] | 61 | 221411 | ] (ASCII 93) |
| 62 | ^ | ^ | 62 | 431111 | ^ (ASCII 94) |
| 63 | _ | _ | 63 | 111224 | _ (ASCII 95) |
| 64 | NUL | ` | 64 | 111422 | ` (ASCII 96) |
| 65 | SOH | a | 65 | 121124 | a (ASCII 97) |
| 66 | STX | b | 66 | 121421 | b (ASCII 98) |
| 67 | ETX | c | 67 | 141122 | c (ASCII 99) |
| 68 | EOT | d | 68 | 141221 | d (ASCII 100) |
| 69 | ENQ | e | 69 | 112214 | e (ASCII 101) |
| 70 | ACK | f | 70 | 112412 | f (ASCII 102) |
| 71 | BEL | g | 71 | 122114 | g (ASCII 103) |
| 72 | BS | h | 72 | 122411 | h (ASCII 104) |
| 73 | HT | i | 73 | 142112 | i (ASCII 105) |
| 74 | LF | j | 74 | 142211 | j (ASCII 106) |
| 75 | VT | k | 75 | 241211 | k (ASCII 107) |
| 76 | FF | l | 76 | 221114 | l (ASCII 108) |
| 77 | CR | m | 77 | 413111 | m (ASCII 109) |
| 78 | SO | n | 78 | 241112 | n (ASCII 110) |
| 79 | SI | o | 79 | 134111 | o (ASCII 111) |
| 80 | DLE | p | 80 | 111242 | p (ASCII 112) |
| 81 | DC1 | q | 81 | 121142 | q (ASCII 113) |
| 82 | DC2 | r | 82 | 121241 | r (ASCII 114) |
| 83 | DC3 | s | 83 | 114212 | s (ASCII 115) |
| 84 | DC4 | t | 84 | 124112 | t (ASCII 116) |
| 85 | NAK | u | 85 | 124211 | u (ASCII 117) |
| 86 | SYN | v | 86 | 411212 | v (ASCII 118) |
| 87 | ETB | w | 87 | 421112 | w (ASCII 119) |
| 88 | CAN | x | 88 | 421211 | x (ASCII 120) |
| 89 | EM | y | 89 | 212141 | y (ASCII 121) |
| 90 | SUB | z | 90 | 214121 | z (ASCII 122) |
| 91 | ESC | { | 91 | 412121 | { (ASCII 123) |
| 92 | FS | | | 92 | 111143 | | (ASCII 124) |
| 93 | GS | } | 93 | 111341 | } (ASCII 125) |
| 94 | RS | ~ | 94 | 131141 | ~ (ASCII 126) |
| 95 (Hex 7F) | US | DEL | 95 | 114113 | DEL (ASCII 127) |
| 96 (Hex 80) | FNC 3 | FNC 3 | 96 | 114311 | Ç (ASCII 128) |
| 97 (Hex 81) | FNC 2 | FNC 2 | 97 | 411113 | ü (ASCII 129) |
| 98 (Hex 82) | SHIFT | SHIFT | 98 | 411311 | é (ASCII 130) |
| 99 (Hex 83) | CODE C | CODE C | 99 | 113141 | â (ASCII 131) |
| 100 (Hex 84) | CODE B | FNC 4 | CODE B | 114131 | ä (ASCII 132) |
| 101 (Hex 85) | FNC 4 | CODE A | CODE A | 311141 | à (ASCII 133) |
| 102 (Hex 86) | FNC 1 | FNC 1 | FNC 1 | 411131 | å (ASCII 134) |
| 103 (Hex 87) | START (Code A) | 211412 | ‡ (ASCII 135) | ||
| 104 (Hex 88) | START (Code B) | 211214 | ˆ (ASCII 136) | ||
| 105 (Hex 89) | START (Code C) | 211232 | ‰ (ASCII 137) | ||
| 106 (Hex 6A) | STOP (All Codes) | 2331112 | Š (ASCII 138) | ||