概述
本 Demo 展示了 REGEXREPLACE 函数的使用方法,通过 4 个典型示例演示了如何使用正则表达式进行文本替换,包括简单模式匹配、捕获组重组、日期格式转换以及不区分大小写的替换操作。
实现思路
创建表格结构,设置列宽和表头样式
准备 4 组测试数据,包含原始文本、正则表达式模式、替换文本和大小写敏感参数
使用 REGEXREPLACE 函数对每组数据进行文本替换处理
使用 FORMULATEXT 函数在表格中显示公式内容,便于用户理解
代码解析
设置表格基础结构
这段代码创建了包含 6 列的表格结构,分别用于展示文本、正则表达式、替换文本、区分大小写参数、公式文本和替换结果。
设置测试数据和公式
代码使用循环为每一行数据设置 REGEXREPLACE 公式。occurrence 参数固定为 0(替换所有匹配项),case_sensitivity 参数从 D 列获取。
运行效果
第一行示例:将 "SpreadJS Worksheet" 中的匹配模式 "s.*t" 替换为 "book",结果为 "book Worksheet"
第二行示例:使用捕获组将日期格式 "12/23/2022" 转换为 "2022-12-23"
第三行示例:使用捕获组交换姓名顺序,将 "John-Smith" 转换为 "Smith John"
第四行示例:不区分大小写替换所有 "red",将 "Red red Rose" 转换为 "blue blue Rose"
用户可以在表格中直接查看公式和替换结果,理解不同参数的作用
API 参考
REGEXREPLACE 函数
text(必需):要替换其中一部分的文本,可以是字符串、单元格引用或单元格范围引用
pattern(必需):正则表达式模式,用于匹配要替换的文本
replacement(必需):用于替换匹配文本的内容,支持使用 $1、$2 等引用捕获组
occurrence(可选):指定要替换的匹配项,默认为 0(替换所有),正整数替换第 N 个,负整数从末尾开始
case_sensitivity(可选):大小写敏感性,0 表示区分大小写(默认),1 表示不区分大小写
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
var sheet = spread.sheets[0];
var defaultStyle = new GC.Spread.Sheets.Style();
defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet.setDefaultStyle(defaultStyle);
sheet.setColumnWidth(0, 200);
sheet.setColumnWidth(1, 230);
sheet.setColumnWidth(2, 160);
sheet.setColumnWidth(3, 140);
sheet.setColumnWidth(4, 250);
sheet.setColumnWidth(5, 150);
sheet.addSpan(0, 0, 2, 1);
sheet.addSpan(0, 1, 2, 1);
sheet.addSpan(0, 2, 2, 1);
sheet.addSpan(0, 3, 2, 1);
sheet.addSpan(0, 4, 2, 1);
sheet.addSpan(0, 5, 2, 1);
sheet.getCell(0, 0).value("文本").font("21px bold normal normal");
sheet.getCell(0, 1).value("正则表达式").font("21px bold normal normal");
sheet.getCell(0, 2).value("替换文本").font("21px bold normal normal");
sheet.getCell(0, 3).value("区分大小写").font("21px bold normal normal");
sheet.getCell(0, 4).value("公式文本").font("21px bold normal normal");
sheet.getCell(0, 5).value("结果").font("21px bold normal normal");
var dataArr = [
["SpreadJS Worksheet", "s.*t", "book", null],
["12/23/2022", "(\\d{2})/(\\d{2})/(\\d{4})", "$3-$1-$2", null],
["John-Smith", "(\\w{4})-(\\w{5})", "$2 $1", null],
["Red red Rose", "red", "blue", 1]];
sheet.setArray(2, 0, dataArr);
for (var i = 0, len = dataArr.length; i < len; i++) {
var row = 3 + i;
sheet.setFormula(row - 1, 5, `=REGEXREPLACE(A${row}, B${row}, C${row}, 0, D${row})`);
sheet.setFormula(row - 1, 4, `=FORMULATEXT(F${row})`);
}
sheet.tables.add("table1", 0, 0, 6, 6, GC.Spread.Sheets.Tables.TableThemes.medium28);
spread.resumePaint();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="zh-cn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
</div>
</body>
</html>
input[type="text"] {
width: 200px;
margin-right: 20px;
}
label {
display: inline-block;
width: 110px;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
width:216px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
code {
border: 1px solid #000;
}