Turkish uppercase dotted i issue in Angular 2 capitalization pipe

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();
    });
  }

}

Have you tried setting a Turkish locale and using `toLocaleUpperCase` instead? You could even use the built-in `UpperCasePipe`, which I think is localised. — jonrsharpe, Apr 12 '17 at 19:18
I tried, is not working. How can try setting Turkish locale? UpperCasePipe is upper all letters. I want just first charachter uppercase. — NadirCan KAVKAS, Apr 12 '17 at 19:57
Yes, but I mean you can DI the `UpperCasePipe` and use `.transform` on it for your first character. You can try setting your locale in your browser settings; look it up for your specific browser in e.g. Google. — jonrsharpe, Apr 12 '17 at 19:58
Possible duplicate of http://stackoverflow.com/questions/14548166/how-to-set-locale-in-javascript-for-example-for-tolocaleuppercase — kennytm, Apr 13 '17 at 05:16
If it's not something that you want to leave to client's locale but always do in Turkish way, you can explicitly do it yourself: `txt.charAt(0).toUpperCase().replace(/I/g, 'İ')` — Amadan, Apr 13 '17 at 05:24
@Amadan I tried replace(/i/g, 'İ'). But now all 'i' characters converted to 'İ'. I want to just first 'i' character converted to 'İ'. I think problem is caused by regular expression. I didnt solve this issue. — NadirCan KAVKAS, Apr 13 '17 at 14:40

score 0 · Answer 1 · answered Feb 22 '23 at 16:23

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>

Turkish uppercase dotted i issue in Angular 2 capitalization pipe

1 Answers1