Syntax
Argument
Description
text
(Required) The text you are searching within. Wildcard characters are not allowed. If the text is an empty string, returns empty text.you can input a string like “text“, or a cell reference like “C4”, or a cell range reference like “C4: D4“ (work in dynamic array)
pattern
(Required) The first part of text that matches this expression will be returned.You can input a string like “[0-9]+“,or a cell reference like “C4“.
return_mode
A number that specifies what strings to extract.0: (default) Return the first string that matches the pattern.1: Return all strings that match the pattern as an array.2: Return capturing groups from the first match as an array.
case_sensitivity
Determines whether the match is case-sensitive.0: (default) Case sensitive.1: Case insensitive.
Dynamic Array
If allowDynamicArray is set to false, REGEXEXTRACT can still work. But for some cases, you may need to set allowDynamicArray to true to get the best result.
In the below example, you will get "Luve" as the result when the allowDynamicArray flag is false, and ["Luve", "rose"] as the result when the flag is true.
Samples
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
import { AppFunc } from './app-func';
import { App } from './app-class';
// 1. Functional Component sample
createRoot(document.getElementById('app')).render(<AppFunc />);
// 2. Class Component sample
// createRoot(document.getElementById('app')).render(<App />);
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
const useState = React.useState;
function _getElementById(id) {
return document.getElementById(id);
}
export function AppFunc() {
const [spread, setSpread] = useState(null);
const initSpread = (spread) => {
setSpread(spread);
spread.suspendPaint();
spread.options.allowDynamicArray = true;
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, 220);
sheet.setColumnWidth(1, 220);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 130);
sheet.setColumnWidth(4, 170);
sheet.setColumnWidth(5, 80);
sheet.setColumnWidth(6, 80);
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, 2);
sheet.getCell(0, 0).value("Text").font("21px bold normal normal");
sheet.getCell(0, 1).value("Regular Expression").font("21px bold normal normal");
sheet.getCell(0, 2).value("Return Mode").font("21px bold normal normal");
sheet.getCell(0, 3).value("Case Sensitivity").font("21px bold normal normal");
sheet.getCell(0, 4).value("Formula Text").font("21px bold normal normal");
sheet.getCell(0, 5).value("Result").font("21px bold normal normal");
var dataArr = [ ["I think SpreadJS is Good", "(good)", "", 1],
["there is 300 rabbits grazing", "\\d+", ""],
["O my Luve is like a red, red rose", "O my (\\w+) is like a red, red (\\w+)", 2]];
sheet.setArray(2, 0, dataArr);
for (var i = 0, len = dataArr.length; i < len; i++) {
var row = 3 + i;
sheet.setFormula(row - 1, 5, `=REGEXEXTRACT(A${row}, B${row}, C${row}, D${row})`);
sheet.setFormula(row - 1, 4, `=FORMULATEXT(F${row})`);
}
spread.resumePaint();
_getElementById('allowDynamicArray').checked = true;
}
const changeFlag = (e) => {
var checked = e.target.checked;
spread.options.allowDynamicArray = !!checked;
spread.resumeCalcService();
spread.resumePaint();
}
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<Panel changeFlag={(e) => changeFlag(e)} />
</div>;
}
function Panel(props) {
return (
<div class="options-container">
<div class="option-row">
<label class="colorLabel">Switch the allowDynamicArray flag.</label>
</div>
<div class="option-row">
<input type="checkbox" id="allowDynamicArray" onChange={(e) => { props.changeFlag(e) }} />
<label for="allowDynamicArray">Allow Dynamic Array</label>
</div>
</div>
);
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
const Component = React.Component;
function _getElementById(id) {
return document.getElementById(id);
}
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
}
render() {
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<Panel changeFlag={(e) => { this.changeFlag(e) }} />
</div>;
}
initSpread(spread) {
this.spread = spread;
spread.suspendPaint();
spread.options.allowDynamicArray = true;
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, 250);
sheet.setColumnWidth(1, 250);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 250);
sheet.setColumnWidth(4, 80);
sheet.setColumnWidth(5, 80);
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, 2);
sheet.getCell(0, 0).value("Text").font("21px bold normal normal");
sheet.getCell(0, 1).value("Regular Expression").font("21px bold normal normal");
sheet.getCell(0, 2).value("Return Mode").font("21px bold normal normal");
sheet.getCell(0, 3).value("Case Sensitivity").font("21px bold normal normal");
sheet.getCell(0, 4).value("Formula Text").font("21px bold normal normal");
sheet.getCell(0, 5).value("Result").font("21px bold normal normal");
var dataArr = [ ["I think SpreadJS is Good", "(good)", "", 1],
["there is 300 rabbits grazing", "\\d+", ""],
["O my Luve is like a red, red rose", "O my (\\w+) is like a red, red (\\w+)", 2]];
sheet.setArray(2, 0, dataArr);
for (var i = 0, len = dataArr.length; i < len; i++) {
var row = 3 + i;
sheet.setFormula(row - 1, 4, `=REGEXEXTRACT(A${row}, B${row}, C${row}, D${row})`);
sheet.setFormula(row - 1 , 3, `=FORMULATEXT(F${row})`);
}
spread.resumePaint();
_getElementById('allowDynamicArray').checked = true;
}
changeFlag(e) {
var checked = e.target.checked;
var spread = this.spread;
spread.options.allowDynamicArray = !! checked;
spread.resumeCalcService();
spread.resumePaint();
}
}
class Panel extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div class="options-container">
<div class="option-row">
<label class="colorLabel">Switch the allowDynamicArray flag.</label>
</div>
<div class="option-row">
<input type="checkbox" id="allowDynamicArray" onChange={(e) => { this.props.changeFlag(e) }} />
<label for="allowDynamicArray">Allow Dynamic Array</label>
</div>
</div>
)
}
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
margin-bottom: 12px;
}
label {
user-select: none;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
