When working with text, a common task is to “break apart” text strings using a delimiter.
To make it easier to extract the text from the start or end of a cell’s contents, we've added two functions that simply return everything before or after your selected delimiter: TEXTBEFORE and TEXTAFTER.
We also added TEXTSPLIT to easily "split" text into multiple segments. Each text segment is then automatically spilled into its own cell through the magic of dynamic arrays.
TEXTBEFORE - Returns text that is before delimiting characters
TEXTAFTER - Returns text that is after delimiting characters
TEXTSPLIT - Splits text into rows or columns using delimiters
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import './styles.css';
const spreadNS = GC.Spread.Sheets, SheetArea = spreadNS.SheetArea;
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
spread: GC.Spread.Sheets.Workbook;
hostStyle = {
width: '100%',
height: '100%',
overflow: 'hidden',
float: 'left'
};
constructor() {}
initSpread($event: any) {
var data = [
{
sheetName: 'TEXTBEFORE',
cells: [
[{v:"Data",s:"title"}],
["Little Red Riding Hood's red hood"],
["Little red Riding Hood's red hood"],
[{v:"Formulas",s:"title"}, {v:"Results",s:"title"}],
["=FORMULATEXT(B5)", '=TEXTBEFORE(A2,"Red")'],
["=FORMULATEXT(B6)", '=TEXTBEFORE(A3,"red",2)'],
["=FORMULATEXT(B7)", '=TEXTBEFORE(A3,"red",-2)'],
["=FORMULATEXT(B8)", '=TEXTBEFORE(A3,"Red")'],
["=FORMULATEXT(B9)", '=TEXTBEFORE(A3,"Red",,1)'],
["=FORMULATEXT(B10)", '=TEXTBEFORE(A3,"Riding")'],
],
columnsWidth: [226, 156]
},
{
sheetName: 'TEXTAFTER',
cells: [
[{v:"Data",s:"title"}],
["Little Red Riding Hood's red hood"],
["Little red Riding Hood's red hood"],
[{v:"Formulas",s:"title"}, {v:"Results",s:"title"}],
["=FORMULATEXT(B5)", '=TEXTAFTER(A2,"Red")'],
["=FORMULATEXT(B6)", '=TEXTAFTER(A3,"red",2)'],
["=FORMULATEXT(B7)", '=TEXTAFTER(A3,"red",-2)'],
["=FORMULATEXT(B8)", '=TEXTAFTER(A3,"Red")'],
["=FORMULATEXT(B9)", '=TEXTAFTER(A3,"Red",,1)'],
["=FORMULATEXT(B10)", '=TEXTAFTER(A3,"Riding")'],
],
columnsWidth: [226, 156]
},
{
sheetName: 'TEXTSPLIT',
cells: [
[{v:"Data",s:"title"}],
["Dakota Lennon Sanchez"],
["To be or not to be"],
["1,2,3;4,5,6"],
[],
[{v:"Formulas",s:"title"}, "=FORMULATEXT(B7)"],
[{v:"Results",s:"title"}, '=TEXTSPLIT(A2, " ")'],
[],
[{v:"Formulas",s:"title"}, "=FORMULATEXT(B10)"],
[{v:"Results",s:"title"}, '=TEXTSPLIT(A3, " ")'],
[],
[{v:"Formulas",s:"title"}, "=FORMULATEXT(B13)"],
[{v:"Results",s:"title"}, '=TEXTSPLIT(A4,",",";")'],
],
columnsWidth: [168]
}
];
let workbook = this.spread = $event.spread;
workbook.options.allowDynamicArray = true;
workbook.suspendPaint();
workbook.suspendCalcService();
this.initStyles(workbook);
workbook.setSheetCount(data.length);
for (var i = 0; i < data.length; i++) {
var sheetData = data[i];
var sheet = workbook.sheets[i];
sheet.name(sheetData.sheetName);
this.setCells(sheet, sheetData.cells, 0, 0);
this.setColumnsWidth(sheet, sheetData.columnsWidth);
}
workbook.resumeCalcService();
workbook.resumePaint();
}
initStyles(workbook: GC.Spread.Sheets.Workbook) {
var style = new GC.Spread.Sheets.Style();
style.name = 'title';
style.font = 'normal bold 16px Segoe UI';
style.foreColor = "#172b4d";
workbook.addNamedStyle(style);
}
setCells(sheet: GC.Spread.Sheets.Worksheet, cells: any[], rowIndex: number, colIndex: number) {
for(var i = 0; i < cells.length; i++) {
var row = cells[i];
var r = rowIndex + i;
for (var j = 0; j < row.length; j++) {
var cell = row[j];
var c = colIndex + j;
if (typeof cell === "object") {
if (cell.v !== undefined) {
sheet.setValue(r, c, cell.v);
}
if (cell.s !== undefined) {
sheet.setStyle(r, c, cell.s)
}
} else if (cell[0] === '=') {
sheet.setFormula(r, c, cell);
} else {
sheet.setValue(r, c, cell);
}
}
}
}
setColumnsWidth(sheet: GC.Spread.Sheets.Worksheet, columnsWidth: number[]) {
if (!columnsWidth) {
return;
}
for (var i = 0; i < columnsWidth.length; i++) {
sheet.setColumnWidth(i, columnsWidth[i]);
}
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule, FormsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
input {
padding: 4px 6px;
display: inline-block;
}
input[type="text"] {
width: 200px;
}
label {
display: block;
margin-bottom: 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
width:216px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.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',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
