Turkish uppercase dotted i issue in Angular 2 capitalization pipe - regex

Question

I have a capitalization pipe. Almost all characters are capitalized. Turkish 'ı' character is converted correctly into 'I'. However, the 'i' character is converted to 'I' when it should be converted into the 'İ' character.
Example 1: ırmak => Irmak (Correct).
Example 2: ismail => Ismail (Incorrect, should be İsmail).
My code is below:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({name: 'capitalize'})
export class CapitalizePipe implements PipeTransform {
transform(value: string, args: string[]): any {
if (!value) return value;
return value.replace(/[çğıöşüa-zA-z]\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
}

Answer 1

First, create a new file and name it "titlecase-turkish.pipe.ts".
Open the file and add the following code:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'titlecaseTurkish'
})
export class TitleCaseTurkishPipe implements PipeTransform {
transform(value: string): string {
if (!value) return null;
let words = value.split(' ');
for (var i = 0; i < words.length; i++) {
words[i] = words[i].toLocaleLowerCase('tr-TR');
words[i] = words[i].charAt(0).toLocaleUpperCase('tr-TR') + words[i].slice(1);
}
return words.join(' ');
}
}
The above code implements the basic functionality of the TitleCaseTurkishPipe. It splits the incoming string value by spaces and converts the first letter of each word to uppercase while converting all other letters to lowercase. To correctly capitalize Turkish characters, the toLocaleLowerCase() and toLocaleUpperCase() methods have been used.
To use the TitleCaseTurkishPipe, you need to first declare it in the AppModule. Add the following code to do so:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { TitleCaseTurkishPipe } from './titlecase-turkish.pipe';
#NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent, TitleCaseTurkishPipe],
bootstrap: [AppComponent]
})
export class AppModule { }
You can now use the TitleCaseTurkishPipe in your HTML file. For example, the following code formats the value of the "name" variable using the TitleCaseTurkishPipe:
<h1>{{ name | titlecaseTurkish }}</h1>