Replace Values From Input Fields

[peter quitzgard]

Hello, I'm currently trying to make some input fields change some

specific pasted values, but so far, without luck. Basically, lets say I'm

working with the "Your favorite animal?" text field, what I need is:

1- Replacing all accented vocals from vowels and some other special

characters, for their regular counterparts, like this:

á & à > a

é & è > e

í  & ì > i

ó  & ò > o

ú & ù > u

ñ > n

ü > u

ç > c

' > delete

And their upper cases as well.

2- And for a separate input field, let's say "Look up an animal",

according to the needed input date format (YYYY-MM-DD),

make the next changes:

A. Replacing "/", "\" and blank spaces with "-".

B. Change format order, like this:

01-12-1988 to 1988-12-01

01/12/1988 to 1988-12-01

C. Add a "0" as needed (for "1" to "9" values), like this:

1-1-1988 to 1988-01-01 

7-8-1988 to 1988-08-07

1988-8-7 to 1988-08-07

D. Add a "-" character, as needed, like this:

01121988 to 01-12-1988

19881201 to 01-12-1988

E. Remove any other characters except the aforementioned

"replaceable" ones, and numbers.

3- Finally, add pasted values from two different input fields, to a third one.

For example, let's say "Your favorite animal?" and "Look up an animal"

input fields are empty, and I paste "Big" in the first one and then "House"

in the second, they should get pasted as "BigHouse" in the third input field

"What is your email?", leaving intact whatever there is after the "@" symbol.
So, after pasting the needed values, it should look like this: "BigH...@example.org".

Thanks.

[peter quitzgard]

The edited "BigH...@example.org" email address should be "BigHouse@example.org".

[peter quitzgard]

Hello, I just see I forgot to mention the test site I'm trying:

https://a11ysupport.io/tests/html/html/inputs.html

I tried to address the "2-A" point by myself recycling a previous

regex you wrote for another field, for some reason it didn't work:

let inputElem = document.querySelector('#example-text')
inputElem.addEventListener('input', evt =>{
    let val = evt.target.value.replace(/[\/]/g,"")

The point one could be simplified by omitting the vowels' second variation.

Thanks

[cw noway]

I WILL LOOK INTO YOUR LIST OF THINGS NEEDING HELP WITH (accents replacements, date reformats, etc.)

I WILL SEE WHAT I CAN DO AND POST SOLUTIONS WHEN I CAN.  CHECK BACK OCCASIONALLY.  

cw

BUT FOR NOW, Here is this:

Regarding your:

2-A regExp replacement example request... 

A. Replacing "/", "\" and blank spaces with "-".

Here you go: 

Example of how to: (Note: strin and strout is for example purposes only)

// --------------------------------------------------------------------------------

// INPUT TEXT THAT CONTAINS "\," "/," AND SPACES

// --------------------------------------------------------------------------------

var strin = 'test \\ test2 /     end of test';

// ---------------------------------------------------------------------

// REPLACE ALL "\," "/," AND SPACES WITH "-"

// ---------------------------------------------------------------------

var strout = strin.replace(/\\|\/|\s/g,'-');

// strout's NEW VALUE:

test---test2-------end-of-test

[cw noway]

/*
Here is a function for your 2-B Change date format:

you can copy and paste this whole response into a Run Script and begin using the function:

HOW TO INSTRUCTIONS ARE INCLUDED IN THE FUNCTION ITSELF.

cw

B. Change format order, like this:

01-12-1988 to 1988-12-01

01/12/1988 to 1988-12-01

C. Add a "0" as needed (for "1" to "9" values), like this:

1-1-1988 to 1988-01-01 

7-8-1988 to 1988-08-07

1988-8-7 to 1988-08-07

D. Add a "-" character, as needed, like this:

01121988 to 01-12-1988

19881201 to 01-12-1988

*/

function FUNC_format_date(strDate, inFormatIs_ddmmyyyy = true) {

var rtn = strDate;
var regex;
var m; // regex match

var intDay;
var intMonth;
var isyearvalid;

var isFormat_ddmmyyyy = (Boolean(inFormatIs_ddmmyyyy) && Boolean(inFormatIs_ddmmyyyy)) == false ? false : true;

/*
*** VERY IMPORTANT ***

THE IN-LINE FUNCTION VARIABLE VALUE "inFormatIs_ddmmyyyy" ABOVE,  
ONLY AFFECTS THE INCOMING 8-DIGIT "strDate" VALUES RECEIVED IN THESE TWO FORMATS:

1. 01121988 (aka ddmmyyyy format)
2. 19881201 (aka yyyymmdd format)

Due to the ambiguity present in an 8-digit date format, there will be times when
the 8-digits could represent both "ddmmyyyy," and "yyyymmdd" formats at the same time.  

The system will be unsure which format you wish to utilize in the "reformatting process."

To ELIMINATE THAT PROBLEM, I added "inFormatIs_ddmmyyyy = true" which will tell this function that
the incoming 8-digit date is in the format of "ddmmyyyy" by DEFAULT.

IF YOU KNOW THE 8-digit FORMAT IS "yyyymmdd," instead, YOU WILL HAVE TO SET "inFormatIs_ddmmyyyy = false" when calling this
function so that the date is properly parsed and reformatted based on "yyyymmdd" and not "ddmmyyyy."

Example:
To send an 8-digit date in the format of ddmmyyyy:    var str = await FUNC_format_date('01121988');
To send an 8-digit date in the format of yyyymmdd:    var str = await FUNC_format_date('19881201', false);

*/



try {

/*
HOW TO CALL: (here are some examples of how to call this function to reformat your dates to your desired look)

NOTE:  "await" is not always mandatory, and at times is forbidden.  It depends on the circumstances:

FOR EXAMPLE:  

This will work: if(FUNC_format_date('01-12-1988').length > 0) {alert('ok');}
This will NOT:  if(await FUNC_format_date('01-12-1988').length > 0) {alert('ok');}

Best practices:  Use "await" if you want to be sure the value of the "function" is returned before the next
line of code is executed.

EXAMPLE:

GOOD:
var rtn = await FUNC_format_date('01-12-1988');
alert(rtn.length) // 10

BAD: Because alert will execute before the value of rtn is set by the function (causing an exception to be thrown)
var rtn = FUNC_format_date('01-12-1988');
alert(rtn.length) // TypeError: Cannot read properties of undefined (reading 'length')
   

OK, BACK TO THE EXAMPLES OF HOW TO CALL:

CHANGE 01-12-1988 to 1988-12-01 var strdate = await FUNC_format_date('01-12-1988') // 1988-12-01
CHANGE 7-8-1988 to 1988-08-07 var strdate = await FUNC_format_date('7-8-1988') // 1988-08-07
CHANGE 1988-8-7 to 1988-08-07 var strdate = await FUNC_format_date('1988-8-7') // 1988-08-07
CHANGE 01121988 to 01-12-1988 var strdate = await FUNC_format_date('01121988') // 01-12-1988
CHANGE 19881201 to 01-12-1988 var strdate = await FUNC_format_date('19881201', false) // 01-12-1988
*/

switch (true) {

case /\d{1,2}(-|\/)\d{1,2}(-|\/)\d{4}/.test(strDate):

/*

-------
CHANGE:
-------

01-12-1988 to 1988-12-01
01/12/1988 to 1988-12-01

1-1-1988 to 1988-01-01
7-8-1988 to 1988-08-07

*/

regex = new RegExp(/(?<day>\d{1,2})(\-|\/)(?<month>\d{1,2})(\-|\/)(?<year>\d{4})/);

m = strDate.match(regex);

// ---------------------------------------------------------------------------------
// ENSURE the "day" value is between 1 and 31, and "month" value is between 1 and 12
// and "year" is > 0
// ---------------------------------------------------------------------------------

intDay = Number(m.groups.day);
intMonth = Number(m.groups.month);
isyearvalid = Number(m.groups.year) > 0;

if (isyearvalid && isDayMonthYearNumberValid(intDay, 2) && isDayMonthYearNumberValid(intMonth, 3)) {

// NOTE: The "pad" function (below) ensures a zero is added to the beginning of single digit numbers.
// (ex. changes 1-1-1988 to 01-01-1988)

// THIS CUSTOMIZED "pad" function can perform more task than just this.  

// SEE THE "pad" FUNCTION BELOW (directly following this current TRY/CATCH statement) FOR MORE DETAILS

rtn = pad(m.groups.year) + '-' + pad(m.groups.month) + '-' + pad(m.groups.day);
// 1988-12-01
}

break;
// ---------------------------------------------------------------------------------



case /\d{4}(-|\/)\d{1,2}(-|\/)\d{1,2}/.test(strDate):

// -------
// CHANGE:
// -------
// 1988-8-7 to 1988-08-07

regex = new RegExp(/(?<year>\d{4})(\-|\/)(?<month>\d{1,2})(\-|\/)(?<day>\d{1,2})/);

m = strDate.match(regex);

// ---------------------------------------------------------------------------------
// ENSURE the "day" value is between 1 and 31, and "month" value is between 1 and 12
// and "year" is > 0
// ---------------------------------------------------------------------------------

intDay = Number(m.groups.day);
intMonth = Number(m.groups.month);
isyearvalid = Number(m.groups.year) > 0;

if (isyearvalid && isDayMonthYearNumberValid(intDay, 2) && isDayMonthYearNumberValid(intMonth, 3)) {

rtn = pad(m.groups.year) + '-' + pad(m.groups.month) + '-' + pad(m.groups.day);
// 1988-08-07
}

break;
// ---------------------------------------------------------------------------------



case /\d{8}/.test(strDate):

// 01121988 to 01-12-1988
// 19881201 to 01-12-1988

// -----------------------------------------------------
if (isFormat_ddmmyyyy) {
// ----------------------
// 01121988 (ddmmyyyy)
// 01121988 to 01-12-1988
// ----------------------

regex = new RegExp(/(?<day>\d{2})(?<month>\d{2})(?<year>\d{4})/);

m = strDate.match(regex);

// ---------------------------------------------------------------------------------
// ENSURE the "day" value is between 1 and 31, and "month" value is between 1 and 12
// and "year" is > 0
// ---------------------------------------------------------------------------------

intDay = Number(m.groups.day);
intMonth = Number(m.groups.month);
isyearvalid = Number(m.groups.year) > 0;

if (isyearvalid && isDayMonthYearNumberValid(intDay, 2) && isDayMonthYearNumberValid(intMonth,
3)) {

rtn = pad(m.groups.day) + '-' + pad(m.groups.month) + '-' + pad(m.groups.year);
// 01121988  -->  01-12-1988
}


} else {
// ----------------------
// 19881201 (yyyymmdd)
// 19881201 to 01-12-1988
// ----------------------

regex = new RegExp(/(?<year>\d{4})(?<month>\d{2})(?<day>\d{2})/);

m = strDate.match(regex);

// ---------------------------------------------------------------------------------
// ENSURE the "day" value is between 1 and 31, and "month" value is between 1 and 12
// and "year" is > 0
// ---------------------------------------------------------------------------------

intDay = Number(m.groups.day);
intMonth = Number(m.groups.month);
isyearvalid = Number(m.groups.year) > 0;

if (isyearvalid && isDayMonthYearNumberValid(intDay, 2) && isDayMonthYearNumberValid(intMonth,
3)) {

rtn = pad(m.groups.day) + '-' + pad(m.groups.month) + '-' + pad(m.groups.year);
// 198881201  -->  01-12-1988
}

break;


} // if(isFormat_ddmmyyyy) {
// -----------------------------------------------------

break; // case /\d{8}/.test(strDate):

} // switch(true) {...

} catch (ex) {
// alert(ex.message);

} // END OF MAIN TRY/CATCH BLOCK
// ---------------------------------------------------------------------------------------



// mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
// "isDayMonthYearNumberValid" FUNCTION

// DETERMINE IF DAY MONTH AND YEAR INTEGER VALUES A LEGITIMATE.
// --------------

function isDayMonthYearNumberValid(numberToCheck, _2IsDay_3IsMonth_4IsYear = 0) {

var rtn = false;
var num = numberToCheck;
var datetype = _2IsDay_3IsMonth_4IsYear;
var isValid_dateTypeNumber = false;

try {

/*
// HOW TO CALL:

ex. To see if the number 19 is a valid "day" number:  var bool = await isDayMonthYearNumberValid(19, 2); // true
ex. To see if the number 19 is a valid "month" number:  var bool = await isDayMonthYearNumberValid(19, 3); // false
ex. To see if the number 19 is a valid "year" number:  var bool = await isDayMonthYearNumberValid(19, 4);  // true

*/


// ----------------------------------
// ENSURE "numberToCheck" is a number
// ----------------------------------
if (Boolean(Number(num)) == false) {
// -----------------
// IT'S NOT A NUMBER
// -----------------
return false;
}

num = Number(num); // convert to number


// ---------------------------------------------------------
// ENSURE "twoIsDay_threeIsMonth_fourIsYear" value is 2 to 4
// ---------------------------------------------------------
isValid_dateTypeNumber = (Boolean(Number(datetype)) && Number(datetype) > 1 && Number(datetype) < 5);


if (isValid_dateTypeNumber) {

datetype = Number(datetype);

switch (datetype) {

case 2:
// ---------------------
// Is "Day" number valid
// ---------------------

rtn = (num > 0 && num < 32);

break;
// -------------------------


case 3:
// -----------------------
// Is "Month" number valid
// -----------------------

rtn = (num > 0 && num < 13);

break;
// -------------------------


case 4:
// ----------------------
// Is "Year" number valid
// ----------------------

rtn = (num > 0);

break;
}

}

} catch (ex) {
// alert(ex.message);
}

// mmmmmmmm
return rtn;
// mmmmmmmm

} // function isDayMonthYearNumberValid(numberToCheck, twoIsDay_threeIsMonth_fourIsYear = 0) {...
// mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm




// mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
// "pad" FUNCTION

// THIS IS A CUSTOMIZED VERSION OF A COMBINATION OF javascript's built-in "padStart()" function, and the "padEnd()" function.
// --------------

function pad(stringToModify, minStringLength = 2, charToUse = '0', addToBeginningOfString = true) {

var rtn = stringToModify;

try {

/*

Repeatedly add the "charToUse" string value to the "stringToModify" value until
the length of the "stringToModify" value is a minimum length of the
"minStringLength" value.

NOTE: By default, the characters (charToUse) will be added to the beginning (start)
of the "stringToModify" value.

If you want it added to the "end" of the "stringToModify" value, you have to
change the "addToBeginningOfString" value to "false" when calling this function

*/

if (addToBeginningOfString != false) {
// -----------------------------------------------------
// Add characters to the "beginning" of the "stringToModify" value
// -----------------------------------------------------
return String(stringToModify).padStart(minStringLength, charToUse);

} else {
// -------------------------------------------------
// Apped characters to the "end" of the "stringToModify" value
// -------------------------------------------------
return String(stringToModify).padEnd(minStringLength, charToUse);

} // if(addToBeginningOfString != false) {...

} catch (ex) {
// alert(ex.message);
rtn = stringToModify;
}

// mmmmmmmm
return rtn;
// mmmmmmmm

} // function pad(stringToModify, minStringLength = 2, charToUse = '0', addToBeginningOfString = true) {
// mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm


// mmmmmmmm
return rtn;
// mmmmmmmm

} // function FUNC_format_date(strDate) {...

[cw noway]

/*
Here is a function for your:  

1. regExp replacing accent characters and the ' char with delete

you can copy and paste this whole response into a Run Script and begin using the function:

HOW TO INSTRUCTIONS ARE INCLUDED IN THE FUNCTION ITSELF.

Hope it helps,

cw

1- Replacing all accented vocals from vowels and some other special
characters, for their regular counterparts, like this:

á & à > a
é & è > e
í  & ì > i
ó  & ò > o
ú & ù > u
ñ > n
ü > u
ç > c
' > delete

And their upper cases as well.

*/

function FUNC_convertChars(charToConvert, _2_isForceLowerCaseReturnValues_3_isForceUppperCaseReturnValues = 0) {

// CONVERT ACCENTED CHARS TO ENGLISH AND THE "'" CHAR TO "delete"

var rtn = charToConvert;
var charToConvert_ = charToConvert;
var numForce = _2_isForceLowerCaseReturnValues_3_isForceUppperCaseReturnValues;
var returnType = 0;
var forceCase = false;

/*
HOW TO CALL:

// NOTE: To Force the converted return value to "lowercase" set the 2nd param to 2:  FUNC_convertChars("Á", 2)
// NOTE: To Force the converted return value to "uppercase" set the 2nd param to 3:  FUNC_convertChars("ǎ", 3)

STANDARD METHOD:    var myReturnedChar = await FUNC_convertChars("'");
// converts ' -to- delete

STANDARD METHOD:    var myReturnedChar = await FUNC_convertChars("Á");
// converts Á -to- A

FORCE LOWERCASE OUTPUT:  var myReturnedChar = await FUNC_convertChars("Á", 2);
// converts Á -to- a

STANDARD METHOD:    var myReturnedChar = await FUNC_convertChars("ǎ");
// converts ǎ -to- a

FORCE UPPERCASE OUTPUT:  var myReturnedChar = await FUNC_convertChars("ǎ", 3);
// converts ǎ -to- A

*/

try {

numForce = (Number(numForce) && (Number(numForce) > 1 && Number(numForce) < 4)) ? Number(numForce) : 0;

returnType = Boolean(numForce) ? numForce : 0;

forceCase = Boolean(returnType);

charToConvert_ = (charToConvert && charToConvert.length > 0) ? charToConvert : undefined;

if (charToConvert_) {

var latin_map = {"'":"delete","Á":"A","Ă":"A","Ắ":"A","Ặ":"A","Ằ":"A","Ẳ":"A","Ẵ":"A","Ǎ":"A","Â":"A","Ấ":"A","Ậ":"A","Ầ":"A","Ẩ":"A","Ẫ":"A","Ä":"A","Ǟ":"A","Ȧ":"A","Ǡ":"A","Ạ":"A","Ȁ":"A","À":"A","Ả":"A","Ȃ":"A","Ā":"A","Ą":"A","Å":"A","Ǻ":"A","Ḁ":"A","Ⱥ":"A","Ã":"A","Ꜳ":"AA","Æ":"AE","Ǽ":"AE","Ǣ":"AE","Ꜵ":"AO","Ꜷ":"AU","Ꜹ":"AV","Ꜻ":"AV","Ꜽ":"AY","Ḃ":"B","Ḅ":"B","Ɓ":"B","Ḇ":"B","Ƀ":"B","Ƃ":"B","Ć":"C","Č":"C","Ç":"C","Ḉ":"C","Ĉ":"C","Ċ":"C","Ƈ":"C","Ȼ":"C","Ď":"D","Ḑ":"D","Ḓ":"D","Ḋ":"D","Ḍ":"D","Ɗ":"D","Ḏ":"D","Dz":"D","Dž":"D","Đ":"D","Ƌ":"D","DZ":"DZ","DŽ":"DZ","É":"E","Ĕ":"E","Ě":"E","Ȩ":"E","Ḝ":"E","Ê":"E","Ế":"E","Ệ":"E","Ề":"E","Ể":"E","Ễ":"E","Ḙ":"E","Ë":"E","Ė":"E","Ẹ":"E","Ȅ":"E","È":"E","Ẻ":"E","Ȇ":"E","Ē":"E","Ḗ":"E","Ḕ":"E","Ę":"E","Ɇ":"E","Ẽ":"E","Ḛ":"E","Ꝫ":"ET","Ḟ":"F","Ƒ":"F","Ǵ":"G","Ğ":"G","Ǧ":"G","Ģ":"G","Ĝ":"G","Ġ":"G","Ɠ":"G","Ḡ":"G","Ǥ":"G","Ḫ":"H","Ȟ":"H","Ḩ":"H","Ĥ":"H","Ⱨ":"H","Ḧ":"H","Ḣ":"H","Ḥ":"H","Ħ":"H","Í":"I","Ĭ":"I","Ǐ":"I","Î":"I","Ï":"I","Ḯ":"I","İ":"I","Ị":"I","Ȉ":"I","Ì":"I","Ỉ":"I","Ȋ":"I","Ī":"I","Į":"I","Ɨ":"I","Ĩ":"I","Ḭ":"I","Ꝺ":"D","Ꝼ":"F","Ᵹ":"G","Ꞃ":"R","Ꞅ":"S","Ꞇ":"T","Ꝭ":"IS","Ĵ":"J","Ɉ":"J","Ḱ":"K","Ǩ":"K","Ķ":"K","Ⱪ":"K","Ꝃ":"K","Ḳ":"K","Ƙ":"K","Ḵ":"K","Ꝁ":"K","Ꝅ":"K","Ĺ":"L","Ƚ":"L","Ľ":"L","Ļ":"L","Ḽ":"L","Ḷ":"L","Ḹ":"L","Ⱡ":"L","Ꝉ":"L","Ḻ":"L","Ŀ":"L","Ɫ":"L","Lj":"L","Ł":"L","LJ":"LJ","Ḿ":"M","Ṁ":"M","Ṃ":"M","Ɱ":"M","Ń":"N","Ň":"N","Ņ":"N","Ṋ":"N","Ṅ":"N","Ṇ":"N","Ǹ":"N","Ɲ":"N","Ṉ":"N","Ƞ":"N","Nj":"N","Ñ":"N","NJ":"NJ","Ó":"O","Ŏ":"O","Ǒ":"O","Ô":"O","Ố":"O","Ộ":"O","Ồ":"O","Ổ":"O","Ỗ":"O","Ö":"O","Ȫ":"O","Ȯ":"O","Ȱ":"O","Ọ":"O","Ő":"O","Ȍ":"O","Ò":"O","Ỏ":"O","Ơ":"O","Ớ":"O","Ợ":"O","Ờ":"O","Ở":"O","Ỡ":"O","Ȏ":"O","Ꝋ":"O","Ꝍ":"O","Ō":"O","Ṓ":"O","Ṑ":"O","Ɵ":"O","Ǫ":"O","Ǭ":"O","Ø":"O","Ǿ":"O","Õ":"O","Ṍ":"O","Ṏ":"O","Ȭ":"O","Ƣ":"OI","Ꝏ":"OO","Ɛ":"E","Ɔ":"O","Ȣ":"OU","Ṕ":"P","Ṗ":"P","Ꝓ":"P","Ƥ":"P","Ꝕ":"P","Ᵽ":"P","Ꝑ":"P","Ꝙ":"Q","Ꝗ":"Q","Ŕ":"R","Ř":"R","Ŗ":"R","Ṙ":"R","Ṛ":"R","Ṝ":"R","Ȑ":"R","Ȓ":"R","Ṟ":"R","Ɍ":"R","Ɽ":"R","Ꜿ":"C","Ǝ":"E","Ś":"S","Ṥ":"S","Š":"S","Ṧ":"S","Ş":"S","Ŝ":"S","Ș":"S","Ṡ":"S","Ṣ":"S","Ṩ":"S","Ť":"T","Ţ":"T","Ṱ":"T","Ț":"T","Ⱦ":"T","Ṫ":"T","Ṭ":"T","Ƭ":"T","Ṯ":"T","Ʈ":"T","Ŧ":"T","Ɐ":"A","Ꞁ":"L","Ɯ":"M","Ʌ":"V","Ꜩ":"TZ","Ú":"U","Ŭ":"U","Ǔ":"U","Û":"U","Ṷ":"U","Ü":"U","Ǘ":"U","Ǚ":"U","Ǜ":"U","Ǖ":"U","Ṳ":"U","Ụ":"U","Ű":"U","Ȕ":"U","Ù":"U","Ủ":"U","Ư":"U","Ứ":"U","Ự":"U","Ừ":"U","Ử":"U","Ữ":"U","Ȗ":"U","Ū":"U","Ṻ":"U","Ų":"U","Ů":"U","Ũ":"U","Ṹ":"U","Ṵ":"U","Ꝟ":"V","Ṿ":"V","Ʋ":"V","Ṽ":"V","Ꝡ":"VY","Ẃ":"W","Ŵ":"W","Ẅ":"W","Ẇ":"W","Ẉ":"W","Ẁ":"W","Ⱳ":"W","Ẍ":"X","Ẋ":"X","Ý":"Y","Ŷ":"Y","Ÿ":"Y","Ẏ":"Y","Ỵ":"Y","Ỳ":"Y","Ƴ":"Y","Ỷ":"Y","Ỿ":"Y","Ȳ":"Y","Ɏ":"Y","Ỹ":"Y","Ź":"Z","Ž":"Z","Ẑ":"Z","Ⱬ":"Z","Ż":"Z","Ẓ":"Z","Ȥ":"Z","Ẕ":"Z","Ƶ":"Z","IJ":"IJ","Œ":"OE","ᴀ":"A","ᴁ":"AE","ʙ":"B","ᴃ":"B","ᴄ":"C","ᴅ":"D","ᴇ":"E","ꜰ":"F","ɢ":"G","ʛ":"G","ʜ":"H","ɪ":"I","ʁ":"R","ᴊ":"J","ᴋ":"K","ʟ":"L","ᴌ":"L","ᴍ":"M","ɴ":"N","ᴏ":"O","ɶ":"OE","ᴐ":"O","ᴕ":"OU","ᴘ":"P","ʀ":"R","ᴎ":"N","ᴙ":"R","ꜱ":"S","ᴛ":"T","ⱻ":"E","ᴚ":"R","ᴜ":"U","ᴠ":"V","ᴡ":"W","ʏ":"Y","ᴢ":"Z","á":"a","ă":"a","ắ":"a","ặ":"a","ằ":"a","ẳ":"a","ẵ":"a","ǎ":"a","â":"a","ấ":"a","ậ":"a","ầ":"a","ẩ":"a","ẫ":"a","ä":"a","ǟ":"a","ȧ":"a","ǡ":"a","ạ":"a","ȁ":"a","à":"a","ả":"a","ȃ":"a","ā":"a","ą":"a","ᶏ":"a","ẚ":"a","å":"a","ǻ":"a","ḁ":"a","ⱥ":"a","ã":"a","ꜳ":"aa","æ":"ae","ǽ":"ae","ǣ":"ae","ꜵ":"ao","ꜷ":"au","ꜹ":"av","ꜻ":"av","ꜽ":"ay","ḃ":"b","ḅ":"b","ɓ":"b","ḇ":"b","ᵬ":"b","ᶀ":"b","ƀ":"b","ƃ":"b","ɵ":"o","ć":"c","č":"c","ç":"c","ḉ":"c","ĉ":"c","ɕ":"c","ċ":"c","ƈ":"c","ȼ":"c","ď":"d","ḑ":"d","ḓ":"d","ȡ":"d","ḋ":"d","ḍ":"d","ɗ":"d","ᶑ":"d","ḏ":"d","ᵭ":"d","ᶁ":"d","đ":"d","ɖ":"d","ƌ":"d","ı":"i","ȷ":"j","ɟ":"j","ʄ":"j","dz":"dz","dž":"dz","é":"e","ĕ":"e","ě":"e","ȩ":"e","ḝ":"e","ê":"e","ế":"e","ệ":"e","ề":"e","ể":"e","ễ":"e","ḙ":"e","ë":"e","ė":"e","ẹ":"e","ȅ":"e","è":"e","ẻ":"e","ȇ":"e","ē":"e","ḗ":"e","ḕ":"e","ⱸ":"e","ę":"e","ᶒ":"e","ɇ":"e","ẽ":"e","ḛ":"e","ꝫ":"et","ḟ":"f","ƒ":"f","ᵮ":"f","ᶂ":"f","ǵ":"g","ğ":"g","ǧ":"g","ģ":"g","ĝ":"g","ġ":"g","ɠ":"g","ḡ":"g","ᶃ":"g","ǥ":"g","ḫ":"h","ȟ":"h","ḩ":"h","ĥ":"h","ⱨ":"h","ḧ":"h","ḣ":"h","ḥ":"h","ɦ":"h","ẖ":"h","ħ":"h","ƕ":"hv","í":"i","ĭ":"i","ǐ":"i","î":"i","ï":"i","ḯ":"i","ị":"i","ȉ":"i","ì":"i","ỉ":"i","ȋ":"i","ī":"i","į":"i","ᶖ":"i","ɨ":"i","ĩ":"i","ḭ":"i","ꝺ":"d","ꝼ":"f","ᵹ":"g","ꞃ":"r","ꞅ":"s","ꞇ":"t","ꝭ":"is","ǰ":"j","ĵ":"j","ʝ":"j","ɉ":"j","ḱ":"k","ǩ":"k","ķ":"k","ⱪ":"k","ꝃ":"k","ḳ":"k","ƙ":"k","ḵ":"k","ᶄ":"k","ꝁ":"k","ꝅ":"k","ĺ":"l","ƚ":"l","ɬ":"l","ľ":"l","ļ":"l","ḽ":"l","ȴ":"l","ḷ":"l","ḹ":"l","ⱡ":"l","ꝉ":"l","ḻ":"l","ŀ":"l","ɫ":"l","ᶅ":"l","ɭ":"l","ł":"l","lj":"lj","ſ":"s","ẜ":"s","ẛ":"s","ẝ":"s","ḿ":"m","ṁ":"m","ṃ":"m","ɱ":"m","ᵯ":"m","ᶆ":"m","ń":"n","ň":"n","ņ":"n","ṋ":"n","ȵ":"n","ṅ":"n","ṇ":"n","ǹ":"n","ɲ":"n","ṉ":"n","ƞ":"n","ᵰ":"n","ᶇ":"n","ɳ":"n","ñ":"n","nj":"nj","ó":"o","ŏ":"o","ǒ":"o","ô":"o","ố":"o","ộ":"o","ồ":"o","ổ":"o","ỗ":"o","ö":"o","ȫ":"o","ȯ":"o","ȱ":"o","ọ":"o","ő":"o","ȍ":"o","ò":"o","ỏ":"o","ơ":"o","ớ":"o","ợ":"o","ờ":"o","ở":"o","ỡ":"o","ȏ":"o","ꝋ":"o","ꝍ":"o","ⱺ":"o","ō":"o","ṓ":"o","ṑ":"o","ǫ":"o","ǭ":"o","ø":"o","ǿ":"o","õ":"o","ṍ":"o","ṏ":"o","ȭ":"o","ƣ":"oi","ꝏ":"oo","ɛ":"e","ᶓ":"e","ɔ":"o","ᶗ":"o","ȣ":"ou","ṕ":"p","ṗ":"p","ꝓ":"p","ƥ":"p","ᵱ":"p","ᶈ":"p","ꝕ":"p","ᵽ":"p","ꝑ":"p","ꝙ":"q","ʠ":"q","ɋ":"q","ꝗ":"q","ŕ":"r","ř":"r","ŗ":"r","ṙ":"r","ṛ":"r","ṝ":"r","ȑ":"r","ɾ":"r","ᵳ":"r","ȓ":"r","ṟ":"r","ɼ":"r","ᵲ":"r","ᶉ":"r","ɍ":"r","ɽ":"r","ↄ":"c","ꜿ":"c","ɘ":"e","ɿ":"r","ś":"s","ṥ":"s","š":"s","ṧ":"s","ş":"s","ŝ":"s","ș":"s","ṡ":"s","ṣ":"s","ṩ":"s","ʂ":"s","ᵴ":"s","ᶊ":"s","ȿ":"s","ɡ":"g","ᴑ":"o","ᴓ":"o","ᴝ":"u","ť":"t","ţ":"t","ṱ":"t","ț":"t","ȶ":"t","ẗ":"t","ⱦ":"t","ṫ":"t","ṭ":"t","ƭ":"t","ṯ":"t","ᵵ":"t","ƫ":"t","ʈ":"t","ŧ":"t","ᵺ":"th","ɐ":"a","ᴂ":"ae","ǝ":"e","ᵷ":"g","ɥ":"h","ʮ":"h","ʯ":"h","ᴉ":"i","ʞ":"k","ꞁ":"l","ɯ":"m","ɰ":"m","ᴔ":"oe","ɹ":"r","ɻ":"r","ɺ":"r","ⱹ":"r","ʇ":"t","ʌ":"v","ʍ":"w","ʎ":"y","ꜩ":"tz","ú":"u","ŭ":"u","ǔ":"u","û":"u","ṷ":"u","ü":"u","ǘ":"u","ǚ":"u","ǜ":"u","ǖ":"u","ṳ":"u","ụ":"u","ű":"u","ȕ":"u","ù":"u","ủ":"u","ư":"u","ứ":"u","ự":"u","ừ":"u","ử":"u","ữ":"u","ȗ":"u","ū":"u","ṻ":"u","ų":"u","ᶙ":"u","ů":"u","ũ":"u","ṹ":"u","ṵ":"u","ᵫ":"ue","ꝸ":"um","ⱴ":"v","ꝟ":"v","ṿ":"v","ʋ":"v","ᶌ":"v","ⱱ":"v","ṽ":"v","ꝡ":"vy","ẃ":"w","ŵ":"w","ẅ":"w","ẇ":"w","ẉ":"w","ẁ":"w","ⱳ":"w","ẘ":"w","ẍ":"x","ẋ":"x","ᶍ":"x","ý":"y","ŷ":"y","ÿ":"y","ẏ":"y","ỵ":"y","ỳ":"y","ƴ":"y","ỷ":"y","ỿ":"y","ȳ":"y","ẙ":"y","ɏ":"y","ỹ":"y","ź":"z","ž":"z","ẑ":"z","ʑ":"z","ⱬ":"z","ż":"z","ẓ":"z","ȥ":"z","ẕ":"z","ᵶ":"z","ᶎ":"z","ʐ":"z","ƶ":"z","ɀ":"z","ff":"ff","ffi":"ffi","ffl":"ffl","fi":"fi","fl":"fl","ij":"ij","œ":"oe","st":"st","ₐ":"a","ₑ":"e","ᵢ":"i","ⱼ":"j","ₒ":"o","ᵣ":"r","ᵤ":"u","ᵥ":"v","ₓ":"x"};


// ------------------------------
rtn = charToConvert_.replace(/[^\x00-\x80]/g,
function(a) {
return latin_map[a] ? latin_map[a] : a;
}
);
// ------------------------------

if (rtn != charToConvert_) {

// --------------------------------
// rtn IS HOLDING A CONVERTED VALUE
// --------------------------------

// --------------------------------
if (forceCase == true) {

switch (returnType) {

case 2:
// ----------------------
// FORCE LOWERCASE OUTPUT
// ----------------------
rtn = rtn.toLowerCase();
break;

case 3:
// ----------------------
// FORCE UPPERCASE OUTPUT
// ----------------------
rtn = rtn.toUpperCase();
break;

} // switch(returnType) {...

} //  if(forceCase == true) {...
// --------------------------------

} // if(rtn != charToConvert_) {...

} //  if (charToConvert_) {

} catch (ex) {
// alert(ex.message);
}

// mmmmmmmm
return rtn;
// mmmmmmmm

}  // function FUNC_convertChars(charToConvert, _2_isForceLowerCaseReturnValues_3_isForceUppperCaseReturnValues = 0) {...

[peter quitzgard]

Hello, I tried with the first example, "2-A", using the next action:

{"customEntities":{"script":[["14",{"value":{"mdTime":1745203479225,"srcCode":"let inputElem = document.querySelector('#example-text')\ninputElem.addEventListener('input', evt =>{\n    let val = evt.target.value.replace(/\\\\|\\/|\\s/g,'-')"}}]]},"sections":[{"id":1,"name":"TESTS"}],"trigActList":[["24",{"actions":[{"sequence":[{"action":"runScript","params":{"scriptId":"script:14"}}],"targets":"currentTab"}],"sctnId":"1","title":"Replace Values","triggers":[{"combins":[{"block":1,"eventId":2061,"wildcard":1}],"preconds":{"urlTests":[{"negate":0,"part":0,"type":"equals","value":"https://a11ysupport.io/tests/html/html/inputs.html"}]}}]}]]}

That should make every time I paste a "/", "\" or a blank space,

they get replaced on the fly by a "-". but nothing happens.

Thanks.

[cw noway]

/*

No problem.  Here you go...  I am not sure exactly what you are trying to do.

But, if you are trying to "replace" "\", "/" and Spaces with "-" in the "object" that you sent " {"customEntities"... ",


--------------------
This is how to do it
--------------------

1. Store the "object" in a variable as an Object. ( ex.  var obj = {"customEntities"... }]}}]}]]}; )

2. Convert the object to a "string," and then run "replace" on that string, like this (below):   Hope that helps, cw

NOTE:  You can place this complete response into a "Run Script" for easier viewing

*/


var obj, str, strnew;

try {

// ---------------------------------
// Store the "Object" as an "Object"
// ---------------------------------

obj = {"customEntities":{"script":[["14",{"value":{"mdTime":1745203479225,"srcCode":"let inputElem = document.querySelector('#example-text')\ninputElem.addEventListener('input', evt =>{\n    let val = evt.target.value.replace(/\\\\|\\/|\\s/g,'-')"}}]]},"sections":[{"id":1,"name":"TESTS"}],"trigActList":[["24",{"actions":[{"sequence":[{"action":"runScript","params":{"scriptId":"script:14"}}],"targets":"currentTab"}],"sctnId":"1","title":"Replace Values","triggers":[{"combins":[{"block":1,"eventId":2061,"wildcard":1}],"preconds":{"urlTests":[{"negate":0,"part":0,"type":"equals","value":"https://a11ysupport.io/tests/html/html/inputs.html"}]}}]}]]};


// --------------------------------
// Convert the "Object" to a string
// --------------------------------

str = JSON.stringify(obj);


// ----------------------------------
// Run "replace" on that string "str"
// ----------------------------------

strnew = str.replace(/\\|\/|\s/gm, '-');

/*
---------------------
*** strnew VALUE: ***
---------------------

{"customEntities":{"script":[["14",{"value":{"mdTime":1745203479225,"srcCode":"let-inputElem-=-document.querySelector('#example-text')-ninputElem.addEventListener('input',-evt-=>{-n----let-val-=-evt.target.value.replace(-----|---|--s-g,'-')"}}]]},"sections":[{"id":1,"name":"TESTS"}],"trigActList":[["24",{"actions":[{"sequence":[{"action":"runScript","params":{"scriptId":"script:14"}}],"targets":"currentTab"}],"sctnId":"1","title":"Replace-Values","triggers":[{"combins":[{"block":1,"eventId":2061,"wildcard":1}],"preconds":{"urlTests":[{"negate":0,"part":0,"type":"equals","value":"https:--a11ysupport.io-tests-html-html-inputs.html"}]}}]}]]}

*/

} catch (ex) {
// alert(ex.message);
}

[cw noway]

// ...Or, maybe you mean something like this

// -----------------------------------------------------------------
// REPLACE "\" "/" and SPACES WITH "-" AS YOU TYPE IN THE INPUT BOX
// -----------------------------------------------------------------

var inputbox_favorite_animal;

try {

// ref:  https://a11ysupport.io/tests/html/html/inputs.html

// USING:  Your favorite animal? INPUT Box as an example
// -----------------------------------------------------

// ------------------
// Get the Input box:
// ------------------

inputbox_favorite_animal = document.querySelector('#example-text');

// ------------------------------------------------------------------------------------
// If the Input box exist, add an Event Listener to perform "replace" upon text change
// ------------------------------------------------------------------------------------

if(inputbox_favorite_animal) {

// ----------------------------------
// Replace "\" "/" and Space with "-"
// ----------------------------------

inputbox_favorite_animal.addEventListener('input', (e) => {
e.target.value = e.target.value.replace(/\\|\/|\s/g,'-');            
});

} else {
alert('\nERROR:\n\n  No "input" element found with an "id" value of "example-text');
}

} catch(ex) {
// alert(ex.message);
}

[cw noway]

Or, maybe you MAY WANT TO EMBED THE "AUTO CHARACTER REPLACEMENT" CAPABILITY INSIDE OF YOUR "HTML" CODE...

Save the below HTML CODE to a .htm or .html file; then load that file into your browser and test the Built-In "Auto Replace" for 

INPUT BOX "1 of 2" only 

Or, open the attached ".HTM" file in your browser and use that for testing.

Ok. I hope some of the OPTIONS that I have provided you helps you out,

cw

<!DOCTYPE html>
<html lang="en">
  <!-- ---------------------------------------------- -->
  <!-- TO TEST THIS AUTO CHAR REPLACING INPUT BOX HTML CODE.  SAVE THIS HTML CODE AS A .htm or .html file; open it in your browser; and test the INPUT BOX  -->
  <!-- ---------------------------------------------- -->  
  <head>
    <title>HTML input tests</title>
  </head>
 
  <body>
 
    <script>
<!-- ---------------------------------------------- -->
// WE ADDED THIS -->  oninput="replaceChar(this)" to whatever "input" element requiring "AUTO CHARACTER REPLACEMENT" (see INPUT BOX "favorite animal" BELOW)
<!-- ---------------------------------------------- -->
        function replaceChar(e) {
          e.value = e.value.replace(/\\|\/|\s/g,'-');              
        }          
    </script>
   
    <h1>HTML input tests</h1>r
   
    <p>The following are html input tests</p>
   
    <h2>input[type=text]</h2>        
    <label for="example-text">Your favorite animal?</label>
   
    <!-- ---------------------------------------------- -->
    <!-- AUTO REPLACE CHARACTERS USING INLINE ATTRIBUTE "oninput" WHICH CALLS FUNCTION "replaceChar" IN THE SCRIPT ABOVE -->
    <!-- ---------------------------------------------- -->
    <input type="text" name="user_email" id="example-text" oninput="replaceChar(this)" placeholder="What is your favorite animal?" />
   
    <!-- <input type="text" name="example-text" value="cats" id="example-text"> -->
   
    <h2>input[type=search]</h2>
    <label for="example-search">Look up an animal</label>
    <input type="search" name="example-search" value="dogs" id="example-search">
   
  </body>
</html>

[peter quitzgard]

Alright, I'm trying to keep this action and its related scripts as simple and straight forward as possible,

so while your new scripts and the related information are more than welcome, initially I thought of simply

"recycling" a previous tiny script the extension's developer shared with me and which just works, but I was

needing the right "regex" values. So, for the "2-A" point of my request, I just took said previous script and

tweaked it with the values you provided me, as well as some new added characters, and it works fine.

The action is this:

And the script is this:

let inputElem = document.querySelector('#example-text')
inputElem.addEventListener('input', evt =>{

    let val = evt.target.value.replace(/\\|\/|\_|\.|\s/g,'-')
    evt.target.value = val.substr (0, 10)
    if ( val.length > 10 )
       evt.target.style.cssText = 'background: red'
   else
        evt.target.style.removeProperty('background')
})

That action will basically replace any "\", "/", "_",  "." and "blank spaces" from the

"favorite animal" testing field with a "-" character; besides, it will limit the amount

of characters to "10", while showing a "red" field background when that limit is exceeded.

So, I will keep trying that recycled action/script combo among with the regex values

you provided, as a basis for the rest of the fields I'm needing to tweak; and I'm gonna

post any further inquiries, in case they show up.

Your input was very informative and useful, thanks a lot.

P.S. The "customEntities" isn't an "object" I added, but a part of the original script's internal

structure, which gets added after exporting the action to a file; and, as you may see, it takes

no "functional" part at all in the script from above, but in how the extension interprets the action itself.

[cw noway]

That is great news to hear your endeavor is working out.  It was my pleasure to have been of assistance.

take care,

cw

[peter quitzgard]

Hello, I'm trying to implement the next changes, but I don't see how to

implement the code you showed me into the action's script.

I would like to test the needed scripts sequentially, i.e., following the points I requested, one by one,

to make it easier to see if they work rightly, or not. So, to begin with the "B" point, could you please

share the AutoControl's exported action, which should be tested using the above mentioned testing page,

and the "Your favorite animal?" text field? That point's action will basically interchange years and days

values positions, leaving intact the month part. Note that the field will always receive the values in a

"day/month/year" format, and should swap them like this ""year/month/day". 

Thanks.

[peter quitzgard]

Considering I will always be pasting numeric strings with a fixed format,

I'm wondering if all the above code's complexity couldn't be avoided,

to use a script which limits to replace the two needed strings order instead?

I mean, expecting a "dd/mm/yyyy" string format, whatever be the pasted date,

make it always inverts the "yyyy" and "dd" strings order.