TypeScript Full Screen, Regular Expression...

• Full Screen
• Regular Expression
• Browser History

Full Screen is the ability of using the computer's full screen and vice-versa when leaving the full screen mode. The Fullscreen API allows us to control browser behaviors, namely forcing full screen and resuming from full screen mode.

Example (forcing full screen and resuming from full screen mode)

window.addEventListener('dblclick', (me: MouseEvent) => {
    if (window.document.fullscreenEnabled) // Full screen facility supported...
        if (window.document.fullscreenElement === null) // Currently *NOT* in full screen mode
            window.document.documentElement.requestFullscreen();
        else window.document.exitFullscreen()
    else window.confirm("Full screen mode not available on this machine...");
});

Rule(s)

• Regular expressions play a large role in JavaScript because data systematically move from strings to numbers, JSON… and vice-versa. Regular expressions are shortcuts for checking formats against standards, practices, expectations… A regular expression is expressed between /. Optional flags like i (standing for “case-insensitive”) may be used as ways of better controlling checking.

Example Shopping.ts.zip 

class Shopping {
    …
    private static readonly _GTIN = /^\d+$/; // Numbers only...
    private static readonly _Query_content = /^[a-z0-9 ]+$/i; // 'Space' included...
    …
    static _Handle(event: KeyboardEvent) {
        …
        if (Shopping._Query_content.test(event.key) && event.key.length === 1) { // 'event' from 'keyup'...
        …
    }
    …
}

match

Rule(s)

• The way regular expressions match strings is instrumented by the match method of the String type (here…).

Example

const ISO_code_pattern_as_String = "^(?!000)(\\d{3}$)"; // 3 digits, exactly excluding '000'...
const ISO_symbol_pattern_as_RegExp = new RegExp("^[A-Z]{3}$"); // 3 upper case letters, exactly...
const Simple_date = RegExp("^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$"); // 'dd/mm/yyyy'...

const ISO_code_pattern_as_RegExp = RegExp(ISO_code_pattern_as_String, "g");
window.alert("111".match(ISO_code_pattern_as_RegExp)); // '111'
window.alert("000".match(ISO_code_pattern_as_RegExp)); // 'null'

Example (Web scraping)

const Google_Images_RH_tag = /"rh":"(amazon\.fr|auchandirect\.fr|bienmanger\.com|carrefour\.fr|catalogue\.cerclevert\.fr|chronodrive\.com|cdiscount\.com|danival\.fr|e-leclerc\.com|episaveurs\.fr|etiketbio\.eu|geantcasino\.fr|intermarche\.com|lagrandeepicerie\.com|lesrobinsdesbio\.com|leaderprice\.fr|lidl\.fr|mangerbiochezmoi\.com|monoprix\.fr|promobutler\.be|provincesbio\.com|prixing\.fr|shoptimise\.fr|webecologie\.com)"/gi;
const Google_Images_PT_tag = /"pt":"[^"]*/g;
const Google_Images_S_tag = /"s":"[^"]*/g;
// 'g' means all occurrences while 'i' means case-insensitive:
const Google_Images_Image_URL_pattern = /"(http(s?):)([/|.|\w|\s|-])*\.(?:gif|jpeg|jpg|png)("|\?)/gi;

Rule(s)

• Regular expressions in JavaScript may overtake Unicode limitations with the u flag (see also here…).

Example RegExp.ts.zip 

class RegExp_ {
    static Try() {
        let reg_exp = new RegExp(" ", "g"); // <=> 'let reg_exp = / /g;' ('g' flag: all matches)
        window.console.assert(reg_exp.global);

        let FB = "Franck        Barbier".replace(reg_exp, "");
//        window.alert(FB);  // 'FranckBarbier'

        reg_exp = new RegExp(" ");
        window.console.assert(!reg_exp.global);
        FB = "Franck        Barbier".replace(reg_exp, "");
//        window.alert(FB);  // 'Franck       Barbier'

        reg_exp = /[\ud800-\udbff][\udc00-\udfff]/; // https://thekevinscott.com/emojis-in-javascript/
        const smiley = String.fromCodePoint(128516);
        window.alert(smiley + "? " + reg_exp.test(smiley)); // 'true'

        const any_currency = /\p{Sc}/gu; // '\p{Sc}' means: any currency symbol ('/u' not yet supported by Firefox?)
        const prices = `Prices: $2, €1, ¥9`;
        window.alert(prices.match(any_currency)); // '$,€,¥'
    }
}

// Test :
RegExp_.Try();