Regex - match character only once - then ignore

Question

I went through a lot of questions and couldn't solve my problem.

I need to match a number of special characters, but only once.

HTML:

 <form class="FillIn Rearrange">
       <input data-correctanswer="ça" type="text">,
       <input data-correctanswer="ça" type="text">
       <input data-correctanswer="vé" type="text">
       <input data-correctanswer="bién" type="text">
</form>

This JS currently returns ALL ç, and é, but I need 1 max. of each:

 var buttons = '';
        $('.FillIn input').each(function () {
            var corrAns = $(this).attr('data-correctanswer');


            for (var i = 0; i < corrAns.length; i++) {
                if (corrAns[i].match(/[éç]/g)) {
                    buttons += '<button>' + corrAns[i] + '</button>';
                }
            }
        });

fiddle

Currently returns ççéé (all occurrences)

Need it to return çé (one of each).

Need a scalable solution, ie .match(/[éçdfga]/g) (or any extra letter)

Answer 1

It looks like you want to end the for loop as soon as you get a match, so throw in a break statement:

 var buttons = '';
        $('.FillIn input').each(function () {
            var corrAns = $(this).attr('data-correctanswer');


            for (var i = 0; i < corrAns.length; i++) {
                if (corrAns[i].match(/[éç]/g)) {
                    buttons += '<button>' + corrAns[i] + '</button>';
                    break;
                }
            }
        });

Answer 2

You simply need to remember what you have already found and not process it:

var buttons = '';
var found   = []; // this remembers what we have already found

$('.FillIn input').each(function () {

    var corrAns = $(this).attr('data-correctanswer');

    for (var i = 0; i < corrAns.length; i++) {

        var m; // hold the match
        if (m = corrAns[i].match(/[éç]/)) {

            // not found yet
            if(found.indexOf(m[0]) == -1) {

                found.push(m[0]) // remember it's been found
                buttons += '<button>' + corrAns[i] + '</button>';
            }
        }
    }
});

Answer 3

Here's how you can do it:

 var buttons = ''; function createButtons(lettersToMatch){ $('.FillIn input').each(function () { var corrAns = $(this).attr('data-correctanswer'); for (var i = 0; i < corrAns.length; i++) { var match = corrAns[i].match(new RegExp(lettersToMatch)); if (match) { buttons += '<button>' + corrAns[i] + '</button>'; lettersToMatch = lettersToMatch.replace(match[0], ""); } } }); } //Testing createButtons("[éèçêïë]"); $("body").append( buttons ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="FillIn Rearrange"> <input data-correctanswer="çaï" type="text">, <input data-correctanswer="ça" type="text"> <input data-correctanswer="vé" type="text"> <input data-correctanswer="bién" type="text"> </form>