Text Manipulation Functions

SpreadJS includes functions designed to help you manipulate text in worksheets more easily.

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
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(_getElementById("ss")); spread.options.allowDynamicArray = true; initStyles(spread); initSpread(spread); }; 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] } ]; function initSpread(workbook) { workbook.suspendPaint(); workbook.suspendCalcService(); 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); setCells(sheet, sheetData.cells, 0, 0); setColumnsWidth(sheet, sheetData.columnsWidth); } workbook.resumeCalcService(); workbook.resumePaint(); } function initStyles(workbook) { var style = new GC.Spread.Sheets.Style(); style.name = 'title'; style.font = 'normal bold 16px Segoe UI'; style.foreColor = "#172b4d"; workbook.addNamedStyle(style); } function setCells(sheet, cells, rowIndex, colIndex) { 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); } } } } function setColumnsWidth(sheet, columnsWidth) { if (!columnsWidth) { return; } for (var i = 0; i < columnsWidth.length; i++) { sheet.setColumnWidth(i, columnsWidth[i]); } } function _getElementById(id) { return document.getElementById(id); }
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.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; }