Javascript RegEx UTF-8

Question

I know JavaScript’s RegEx only supports the \b word boundary class on ASCII strings. But is there anything I can do to make it work with UTF-8 characters?

I have read several posts about it here on stackoverflow, and tried a few methods like the one described here.

But I still cannot make it work.

I have a page where the user is asked his name.

After typing it in a textbox, a reply will show up, using part of the value from the textbox to greet the user, and ignoring some other parts of it.

If the user types "My name is John", the reply will be "Hello, john! Nice to meet you!".

This works fine in English, but the page will be on several different languages that use characters like é á ó ã ñ... How can I make it ignore these characters when they are not part of the name?

This is what I am working with:

function myFunction() {
    var text;
    var answer = document.getElementById("myInput").value.toLowerCase();
	answer = answer.replace(/[^a-z0-9çéã\s]/g, "");
	answer = answer.replace(/\b(my|name|is|)\b/g, '').trim();

    switch(answer) {
        case "":
            text = "Please type something.";
        break;
        default:
        text = "Hello, " + answer + "! Nice to meet you!";
    }
    document.getElementById("reply").innerHTML = text;
}

<p>What is your name?</p>

<input id="myInput" type="text">

<button onclick="myFunction()">Go</button>

<p id="reply"></p>

I tried .replace(/á|é|ó|\b(my|name|is)\b/g, '') But this removes those characters when they are part of words/names and not when they are used as single words (which is what I want).

Following the example on that link, I also tried:

answer = answer.replace(/(^|[ \n\r\t.,'"+!?-]+)(é|á|ó|ñ|õ|hello|my|name|is)([ \n\r\t.,'"\+!?-]+|$)/g, '$1$3').trim();

But it still does not work as intended...

How can I fix this?

This may not be the answer you are expecting but: do you intent to use the name in an URL? (although there is a way to use diacritics in URL) If not, I must tell you that I don't like my name without diacritics. However there is a way to validate for lowercase diacritics. I'm using [a-z\xC0-\xff]or [a-z\u00C0-\u017F] — enxaneta
– enxaneta, Commented Sep 23, 2018 at 7:41
I do not intend to use the name in an URL. As for the rest of your reply... I'm quite new to this, and I don't understand much of that yet. WHat can I change in my code, to make it work? — MikeMichaels
– MikeMichaels, Commented Sep 23, 2018 at 7:44
Are you using ECMAScript 2018 compatible environment? You might use /(?<!\p{L}\p{M}*)([áéó]|my|name|is)(?!\p{L})/gu — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Sep 23, 2018 at 8:15
Or, emulating \b: /(?<![\p{L}\p{N}_])([áéó]|my|name|is)(?![\p{L}\p{N}_])/gu — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Sep 23, 2018 at 8:22
Side note (because you said "UTF-8 characters"): JavaScript uses UTF-16, not UTF-8. Both are character encodings for the entire Unicode character set. It is sometimes important to understand that Sting is a sequence of UTF-16 code units and that some Unicode characters require more than one UTF-16 code unit. — Tom Blodget
– Tom Blodget, Commented Sep 23, 2018 at 16:12

enxaneta · Accepted Answer · 2018-09-23 08:05:23Z

1

Again: I don't know if this is the answer you are looking for. This will also recapitalize the first letter of the name. So if I'm writing "My name is Salvador Dalí" the answer is: "Hello, Salvador Dalí! Nice to meet you!"

var myInput = document.getElementById("myInput");

function myFunction() {
  var text,
    answer = myInput.value.toLowerCase();
  answer = answer.replace("my name is ", "");

  switch (answer) {
    case "":
      text = "Please type something.";
      break;
    default:
      text = "Hello, " + CapitalizeName(answer) + "! Nice to meet you!";
  }
  document.getElementById("reply").innerHTML = text;
}

function CapitalizeName(name) {
  let _array = name.split(" ");
  let n_array = [];
  _array.map(w => {
    w = w.charAt(0).toUpperCase() + w.slice(1);
    n_array.push(w);
  });
  return n_array.join(" ");
}

<p>What is your name?</p>

<input id="myInput" type="text">

<button onclick="myFunction()">Go</button>

<p id="reply"></p>

answered Sep 23, 2018 at 8:05

enxaneta

33.2k6 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MikeMichaels Over a year ago

This solves my problem! Thank you very much for your help, mate.

Collectives™ on Stack Overflow

Javascript RegEx UTF-8

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related