27

I am comparing strings and have to replace umlauts in JS, but it seems JS does not recognize the umlauts in the strings. The text comes from the database and in the browser the umlauts do show fine.

function replaceUmlauts(string)
{
    value = string.toLowerCase();
    value = value.replace(/ä/g, 'ae');
    value = value.replace(/ö/g, 'oe');
    value = value.replace(/ü/g, 'ue');
    return value;
}

As search patterns I tried:

  • "ä", "ö", "ü"
  • /ä/, /ö/, /ü/
  • "ä", "ö", "ü" (well total despair ;-))

To be sure, that it is not a matter with the replace function I tried indexOf:

console.log(value.indexOf('ä'));

But the output with all patterns is: -1

So I guess it is some kind of a problem with encoding, but as I said on the page the umlauts do just look fine.

Any ideas? This seems so simple...

EDIT: Even if I found my answer, the problem was not really solved "at the root" (the encoding). This is my page encoding:

<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">

The database has: utf8_general_ci

Seems totally alright to me.

4
  • 1
    What encoding do you use in your database and what encoding do you use in your web page?
    – Marc
    Jul 25, 2012 at 15:10
  • And what is the string??? Log it. Your approaches would work, but as you can see from your indexOf, your string does not contain an "ä".
    – Bergi
    Jul 25, 2012 at 15:11
  • "bäg".replace(/ä/g, "ae"); // ==> "baeg", so something is probably off with your encoding Jul 25, 2012 at 15:14
  • @Bergi: I logged the string and the ä is shown in the console, beofre and after teh replacing - it definitely is there :-) I wrote my encoding into the question, which seems totally okay with me, thats the reasion I chose the answer of Oleg. Many thanks to all to you - and yeah this way the problem is not really solved at "it's root"
    – SamiSalami
    Jul 26, 2012 at 8:18

5 Answers 5

61

Either ensure that your script's encoding is correctly specified (in <script> tag or in page's header/meta if it's embedded) or specify symbols with \uNNNN syntax that will always unambiguously resolve to some specific Unicode codepoint.

For example:

str.replace(/\u00e4/g, "ae")

Will always replace ä with ae, no matter what encoding is set for your page/script, even if it is incorrect.

Here are the codes needed for Germanic languages:

// Ü, ü     \u00dc, \u00fc
// Ä, ä     \u00c4, \u00e4
// Ö, ö     \u00d6, \u00f6
// ß        \u00df
3
  • Thank you very much, this works :-) I have utf-8 encoding on the page: <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> which seems totally right to me, so i will just work with that...
    – SamiSalami
    Jul 26, 2012 at 8:13
  • 1
    Here are more of the codes: // Ü, ü \u00dc, \u00fc // Ä, ä \u00c4, \u00e4 // Ö, ö \u00d6, \u00f6 // ß \u00df Jan 19, 2017 at 22:10
  • 1
    Å for the Nordic countries: // Å,å: \u00c5, \u00e5
    – Jussi Palo
    May 18, 2017 at 9:14
27

If you are looking to replace the German Umlaute with cleverly respecting the case, use this (opensource, happy to share, all by me):

const umlautMap = {
  '\u00dc': 'UE',
  '\u00c4': 'AE',
  '\u00d6': 'OE',
  '\u00fc': 'ue',
  '\u00e4': 'ae',
  '\u00f6': 'oe',
  '\u00df': 'ss',
}

function replaceUmlaute(str) {
  return str
    .replace(/[\u00dc|\u00c4|\u00d6][a-z]/g, (a) => {
      const big = umlautMap[a.slice(0, 1)];
      return big.charAt(0) + big.charAt(1).toLowerCase() + a.slice(1);
    })
    .replace(new RegExp('['+Object.keys(umlautMap).join('|')+']',"g"),
      (a) => umlautMap[a]
    );
}

const test = ['Übung', 'ÜBUNG', 'üben', 'einüben', 'EINÜBEN', 'Öde ätzende scheiß Übung']
test.forEach((str) => console.log(str + " -> " + replaceUmlaute(str)))

It will:

  • Übung -> Uebung
  • ÜBUNG -> UEBUNG
  • üben -> ueben
  • einüben -> einueben
  • EINÜBEN -> EINUEBEN
  • and the same for Ä, Ö
  • and simple ß -> ss
1
13

Here's a function that replaces most common chars to produce a Google friendly SEO url:

function deUmlaut(value){
  value = value.toLowerCase();
  value = value.replace(/ä/g, 'ae');
  value = value.replace(/ö/g, 'oe');
  value = value.replace(/ü/g, 'ue');
  value = value.replace(/ß/g, 'ss');
  value = value.replace(/ /g, '-');
  value = value.replace(/\./g, '');
  value = value.replace(/,/g, '');
  value = value.replace(/\(/g, '');
  value = value.replace(/\)/g, '');
  return value;
}
1
4

If you need a little snippet to convert german umlauts to html special charactes, here you go:

function fixUmlauts(value) {
    value = value.replace(/ä/g, '&auml;');
    value = value.replace(/ö/g, '&ouml;');
    value = value.replace(/ü/g, '&uuml;');
    value = value.replace(/ß/g, '&szlig;');
    value = value.replace(/Ä/g, '&Auml;');
    value = value.replace(/Ö/g, '&Ouml;');
    value = value.replace(/Ü/g, '&Uuml;');
    return value;
}

2

You need to first figure out what the character codes are that you're trying to replace. For example, depending on the character encoding, the characters could be in 8859, UTF-8 or something else. They could also be character symbols such as "ä"

Rather than guessing, print them out.

And beware that your incoming data may not use the same character set/character encoding consistently--you need to check on where the data is coming from.

So look at the incoming data by using string. charCodeAt

Check the character code before the toLowerCase to ensure that it is not changing things on you. You'll need to debug step by step.

Finally, check the character set settings in your editor to ensure that your typed ä is what it should be. You may want to specify it via the UTF8 value rather than typing ä, ö etc

2
  • 2
    No matter what you use as encoding in page, in JS everything is Unicode and a-umlaut will always have exactly same code. Jul 25, 2012 at 15:15
  • I think my document encoding (my file in the editor) does not matter, because the text is coming from a database, so only the encoding in the database and in the html meta tags should be important or not? And your formatting of the function is rather confusing, it should be string.charCodeAt(0); (0 is the first position), but I really did not think of it and it was a good clue, unfortunately it did not help - the right unicode was returned before the toLowerCase as well as afterwards.
    – SamiSalami
    Jul 26, 2012 at 8:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.