TypeScript Full Screen, Regular Expression...


Creative Commons License
This -TypeScript Full Screen, Regular Expression...- tutorial is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License
Headlines
Full Screen

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...");
});
Regular Expression (see also here… and there…)

Rule(s)

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)

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)

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