const regex = /(?:fieldControlData\[?\'?\!?\.?)(\w*)(?:\'\])\!?\??\.?/m;
// Alternative syntax using RegExp constructor
// const regex = new RegExp('(?:fieldControlData\\[?\\\'?\\!?\\.?)(\\w*)(?:\\\'\\])\\!?\\??\\.?', 'm')
const str = `<dxi-column [filterType]="'include'"
[dataField]="'Version'"
[caption]="fieldControlData['Version']?.CaptionDescription"
[visible]="fieldControlData['Version']?.visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'DeptName'"
[caption]="fieldControlData['DeptName']?.CaptionDescription"
[visible]="fieldControlData['DeptName'].visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'"></dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'DivName'"
[caption]="fieldControlData['DivName']?.CaptionDescription"
[visible]="fieldControlData['DivName']?.visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'"
[groupIndex]="0"></dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'OwnerName'"
[caption]="fieldControlData['OwnerName']?.CaptionDescription"
[visible]="fieldControlData['OwnerName']?.visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'"></dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'CentralizedDivName'"
[caption]="fieldControlData['CentralizedDivName']?.CaptionDescription"
[visible]="fieldControlData['CentralizedDivName']?.visible && currentPlanVersion.Code === '2'"
[minWidth]="50"
[width]="150"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'JobCentralized'"
[caption]="fieldControlData['JobCentralized']?.CaptionDescription"
[visible]="fieldControlData['JobCentralized']?.visible && currentPlanVersion.Code === '2'"
[minWidth]="50"
[width]="120"
[alignment]="'center'"
[headerCellTemplate]="'defaultHeaderTemplate'"></dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'JobCodeName'"
[caption]="fieldControlData['JobCode']?.CaptionDescription"
[visible]="fieldControlData['JobCode']?.visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'"
[groupIndex]="1">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'JobControlPoolName'"
[caption]="fieldControlData['JobControlPoolName']?.CaptionDescription"
[visible]="fieldControlData['JobControlPoolName']?.visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'CatName'"
[caption]="fieldControlData['CatName']?.CaptionDescription"
[visible]="fieldControlData['CatName']?.visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'BudgetItemName'"
[caption]="fieldControlData['BudgetItemName']?.CaptionDescription"
[visible]="fieldControlData['BudgetItemName']?.visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'AssetName'"
[caption]="fieldControlData['AssetName']?.CaptionDescription"
[visible]="fieldControlData['AssetName']?.visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'StartDate'"
[caption]="fieldControlData['StartDate']?.CaptionDescription"
[visible]="fieldControlData['StartDate']?.visible"
[showWhenGrouped]="true"
[dataType]="'date'"
[format]="'yyyy-MM-dd'"
[alignment]="'center'"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'EndDate'"
[caption]="fieldControlData['EndDate']?.CaptionDescription"
[visible]="fieldControlData['EndDate']?.visible"
[showWhenGrouped]="true"
[dataType]="'date'"
[format]="'yyyy-MM-dd'"
[alignment]="'center'"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'TargetMarginPercent'"
[caption]="fieldControlData['TargetMarginPercent']?.CaptionDescription"
[visible]="fieldControlData['TargetMarginPercent']?.visible"
[showWhenGrouped]="true"
[dataType]="'number'"
[format]="'#,##0.00 %'"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'IsCustDecision'"
[caption]="fieldControlData['IsCustDecision']?.CaptionDescription"
[visible]="fieldControlData['IsCustDecision']?.visible"
[showWhenGrouped]="true"
[dataType]="'boolean'"
[trueText]="'Yes ใช่'"
[falseText]="'No ไม่ใช่'"
[alignment]="'center'"
[headerCellTemplate]="'defaultHeaderTemplate'"
[cellTemplate]="'yesnoCellTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'CustCommitmentPercent'"
[caption]="fieldControlData['CustCommitmentPercent']?.CaptionDescription"
[visible]="fieldControlData['CustCommitmentPercent']?.visible"
[showWhenGrouped]="true"
[dataType]="'number'"
[format]="'#,##0.00 %'"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'BudgetDetail'"
[caption]="fieldControlData['BudgetDetail']?.CaptionDescription"
[visible]="fieldControlData['BudgetDetail']?.visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'"
[width]="200">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'CostElementName'"
[caption]="fieldControlData['CostElementName']?.CaptionDescription"
[visible]="fieldControlData['CostElementName']?.visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'WorkProgramName'"
[caption]="fieldControlData['WorkProgramID']?.CaptionDescription"
[visible]="fieldControlData['WorkProgramID']?.visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'InvestmentTypeCodeName'"
[caption]="fieldControlData['InvestmentTypeCodeName'].CaptionDescription"
[visible]="fieldControlData['InvestmentTypeCodeName'].visible"
[showWhenGrouped]="true"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ActualAmount'"
[caption]="fieldControlData['ActualAmount']?.CaptionDescription"
[visible]="fieldControlData['ActualAmount']?.visible"
[headerCellTemplate]="'defaultHeaderTemplate'">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'TotalAmount'"
[caption]="fieldControlData['TotalAmount']?.CaptionDescription"
[visible]="fieldControlData['TotalAmount']?.visible"
[headerCellTemplate]="'defaultHeaderTemplate'"
[fixedPosition]="'right'"
[fixed]="true">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'TotalAmountLastYear'"
[caption]="fieldControlData?.TotalAmountLastYear?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanAmount'"
[caption]="fieldControlData['PlanAmount']?.CaptionDescription"
[visible]="fieldControlData['PlanAmount']?.visible"
[headerCellTemplate]="'defaultHeaderTemplate'">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanAmountLastYear'"
[caption]="fieldControlData?.PlanAmountLastYear?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanM1'"
[caption]="fieldControlData['PlanM1']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanM2'"
[caption]="fieldControlData['PlanM2'].CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanM3'"
[caption]="fieldControlData['PlanM3']!.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanM4'"
[caption]="fieldControlData['PlanM4']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanM5'"
[caption]="fieldControlData['PlanM5']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanM6'"
[caption]="fieldControlData['PlanM6']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanM7'"
[caption]="fieldControlData['PlanM7']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanM8'"
[caption]="fieldControlData['PlanM8']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanM9'"
[caption]="fieldControlData['PlanM9']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanM10'"
[caption]="fieldControlData['PlanM10']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanM11'"
[caption]="fieldControlData['PlanM11']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'PlanM12'"
[caption]="fieldControlData['PlanM12']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'CommitAmount'"
[caption]="fieldControlData['CommitAmount']?.CaptionDescription"
[visible]="fieldControlData['CommitAmount']?.visible"
[headerCellTemplate]="'defaultHeaderTemplate'">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ComM1'"
[caption]="fieldControlData['ComM1']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ComM2'"
[caption]="fieldControlData['ComM2']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ComM3'"
[caption]="fieldControlData['ComM3']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ComM4'"
[caption]="fieldControlData['ComM4']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ComM5'"
[caption]="fieldControlData!.ComM5?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ComM6'"
[caption]="fieldControlData['ComM6']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ComM7'"
[caption]="fieldControlData['ComM7']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ComM8'"
[caption]="fieldControlData['ComM8']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ComM9'"
[caption]="fieldControlData['ComM9']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ComM10'"
[caption]="fieldControlData['ComM10']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ComM11'"
[caption]="fieldControlData['ComM11']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'ComM12'"
[caption]="fieldControlData.ComM12']?.CaptionDescription"
[headerCellTemplate]="'defaultHeaderTemplate'"
[visible]="false">
<dxo-format type="fixedPoint"
[precision]="2"> </dxo-format>
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'Remark'"
[caption]="fieldControlData?.'Remark']?.CaptionDescription"
[visible]="fieldControlData['Remark']?.visible"
[width]="120"
[headerCellTemplate]="'defaultHeaderTemplate'"></dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'Message'"
[minWidth]="110"
[headerCellTemplate]="'defaultHeaderTemplate'"
[caption]="fieldControlData['Message']?.CaptionDescription"
[visible]="fieldControlData['Message']?.visible"></dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'SubmitSAPDate'"
[caption]="fieldControlData['SubmitSAPDate']?.CaptionDescription"
[visible]="fieldControlData['SubmitSAPDate']?.visible"
[showWhenGrouped]="true"
[dataType]="'date'"
[format]="'yyyy-MM-dd'"
[alignment]="'center'"
[headerCellTemplate]="'defaultHeaderTemplate'">
</dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'Comment'"
[caption]="fieldControlData['CommentReject']?.CaptionDescription"
[visible]="fieldControlData['CommentReject']?.visible"
[width]="200"
[headerCellTemplate]="'defaultHeaderTemplate'"></dxi-column>
<dxi-column [filterType]="'include'"
[dataField]="'StateInfo'"
[caption]="fieldControlData['StateInfo']?.CaptionDescription"
[visible]="fieldControlData['StateInfo']?.visible"
[alignment]="'center'"
[width]="100"
[cellTemplate]="'stateCellTemplate'"
[fixedPosition]="'right'"
[fixed]="true"
[headerCellTemplate]="'defaultHeaderTemplate'">
<div *dxTemplate="let item of 'stateCellTemplate'">
<span>{{ item.data.StateInfo | emptyValue }}</span>
</div>
</dxi-column>
<!-- <dxi-column [filterType]="'include'"
[dataField]="'StatusName'"
[caption]="fieldControlData['StatusName']?.CaptionDescription"
[visible]="fieldControlData['StatusName']?.visible"
[alignment]="'center'"
[width]="110"
[cellTemplate]="'statusCellTemplate'"
[fixed]="true"
[fixedPosition]="'right'"
[headerCellTemplate]="'defaultHeaderTemplate'"
>
<div *dxTemplate="let item of 'statusCellTemplate'">
<span class="badge-status badge wd-90" [ngClass]="item.data.StatusName | statusClass">{{
item.data.StatusName
}}</span>
</div>
</dxi-column> -->
<!-- [visible]="permissionActions[PermissionAction.Edit]" -->
<dxi-column [filterType]="'include'"
[alignment]="'center'"
[width]="100"
[cellTemplate]="'actionCellTemplate'"
[allowGrouping]="false"
[allowHeaderFiltering]="false"
[allowFiltering]="false"
[allowHiding]="false"
[allowSorting]="false"
[allowSearch]="false"
[showInColumnChooser]="false"
[fixed]="true"
[fixedPosition]="'right'">
<div *dxTemplate="let item of 'actionCellTemplate'">
<div class="mx-1">
<button *ngIf="item.data.CanEdit && permissionActions[PermissionAction.Edit]"
class="btn btn-action btn-dark p-1 mr-2 no-box-shadow bs-tooltip"
title="Edit Plan"
(click)="editPlanClick(\$event, item.data)">
<i class="fa-solid fa-edit fa-lg"></i>
</button>
<button *ngIf="item.data.CanEdit && permissionActions[PermissionAction.Delete]"
class="btn btn-danger btn-action p-1 mr-2 no-box-shadow bs-tooltip"
title="Delete Plan"
(click)="deletePlanItemClick(item.data)">
<i class="fa-solid fa-trash-can fa-lg"></i>
</button>
</div>
</div>
</dxi-column>`;
const subst = `fieldControlerData?.$1?.`;
// The substituted value will be contained in the result variable
const result = str.replace(regex, subst);
console.log('Substitution result: ', result);
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for JavaScript, please visit: https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions