Date and Email-Line Wrapping for ECMAScript

Sending Email with ECMAScript – Part 2

ECMAScript 6

Foreword: In this part of the series we look at Date and Email-Line Wrapping for ECMAScript.

By: Chrysanthus Date Published: 15 Jul 2016

Introduction

This is part 2 of my series, Sending Email with ECMAScript. In this part of the series we look at Date and Email-Line Wrapping for ECMAScript. When you fill an HTML form and send the information as Email, it is advisable for the date the email is sent (written), to appear in the Email. The User does not usually fill the date in the form. The local server date and time is normally sent, automatically. I show you how that is done in this part of the series. No line, including header lines of an Email message should be longer than 78 characters (including the space characters). The email section header lines and the non-form message fields are not usually longer than 78 characters. By non-form message fields, I am referring to form fields like first and second name fields. However, the message field (Text Area) from the form may have lines longer than 78 characters. Such lines have to be broken down into lines of not more than 78 characters long. I show you how to do that in this part of the series.

You need basic knowledge in ECMAScript regular expression, ECMAScript (and HTML) in order to understand this article.

Date

The ECMAScript Datetime Components
The date constructor reads the current datetime from its computer and returns the date object. The different dtatetime components of the date can be obtained from the date object as the following code shows:

       dteObj = new Date();

        sec = dteObj.getSeconds();
        min = dteObj.getMinutes();
        hour = dteObj.getHours();
        mday = dteObj.getDate();
        mon = dteObj.getMonth();
        year = dteObj.getFullYear();
        wday = dteObj.getDay();

There are seven elements in the list. The values of the variables in the list are numbers. sec is second as you would read from a clock (it may be one or double digit). min is minutes as you would read from a clock (it may be one or double digit). hour is hour (24-hour-clock) as you would read from a clock (it may be one or double digit). The clock is a 12-hour clock, localtime.

mday is the day number of the month and can be from 1 to 31. mon is the month number and can be any number from 0 to 11, where 0 means January and 11 means December. year is the four-digit year..

wday is the day number of the week and can be any number from 0 to 6, where 0 is Sunday and 6 is Saturday.

Email Date and Time Format
Consider the following date-time example:

Fri, 21 Nov 2010 09:55:13

This is an example of an email (U.S.A) date-time format. It needs a space, a negative sign and four digits to be complete (see below). Above, you have the day of the week in letters, a comma, the day number of the month, the month in letters, the four-digit year, the hour, minutes and seconds. Date and time are usually displayed in a particular format as in the above example.

To use the Date() constructor and finally display local time (date-time) in the above format, there is one main problem: the day of the week and month of the year are given as three-letter words. The other values of the format can be determined from the date obejct. Since hour, minutes and seconds of an email have to consists of 2 digits, when these are read from the object, you have to check if they are two digits. If they are not you have to make them so by preceding the single digit with zero; that is not difficult (see below). For these quantities, numbers less than 10 come from the date object as 1 digit.

Here is how we shall link the letter days of the week and the letter months of the year to their corresponding numbers from the date object: For the days of the week there will be an array of seven elements; the values of this array are the three-letter words for the days of the week. Each of the indices of the array element is a number that can return the three-letter day of the week. Index 0 corresponds to Sun, index 1 to Mon, index 2 to Tue, etc. For the months of the year there will be an array of 12 elements; the values of this array are the three-letter words for the months of the year. Each of the indices of the array element is a number that can return the corresponding three-letter month of the year.

Note the use of a comma, spaces and colons in the above example email format.

Implementation
The following code displays a string of the server local time according to the format given in the example above:

var dteObj = new Date();

var week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var mYear = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

var serverDateStr;

var year = dteObj.getFullYear();
var hr = dteObj.getHours();
var mn = dteObj.getMinutes();
var sc = dteObj.getSeconds();
if (hr < 10)
    {
        hr = "0" + `${hr}`;
    }
if (mn < 10)
    {
        mn = "0" + `${mn}`;
    }
if (sc < 10)
    {
        sc = "0" + `${sc}`;
    }

serverDateStr = week[dteObj.getDay()] + ", " + dteObj.getDate() + " " + mYear[dteObj.getMonth()] + " " + year + " " + hr + ":" + mn + ":" + sc;

console.log(serverDateStr);

Read through the code. I will talk about the console statement later.

Email-Line Wrapping

Wrapping User Sent Message
The message the user sends may have lines that are longer than 78 characters. You produce text of not more than 78 characters long by inserting the ECMAScript newline character (\n) within the text, in such a way that you cannot count up to 78 characters without seeing the newline character (\n). The code I use for this is as follows (70 chars max):

function textWrap(msgVal)
    {
        msgVal = msgVal.replace(/^\s+/, ""); //remove leading whitespace characters
        arr = msgVal.split(/\r\n|\n/);  //split at new lines
        str = ""; //final string
        for (item of arr)
           {//form the final string inserting \n
                item = item.replace(/^\s+/, ""); //remove leading whitespace characters
                if (item.length <= 70)
                    {
                        str = str + item +"\n";
                    }
                else
                   {//get up to 70 characters without last broken word, ending them with \n
                        while (item.length >0)
                            {
                                if (item.length >= 70)
                                    {
                                        str1 = item.substring(0, 70);
                                        str2 = str1.replace(/\s\S*$/, "");
                                        str = str + str2 + '\n';
                                        if (str1.length == 70)
                                            {
                                                item = item.replace(str2, "");
                                                item = item.replace(/^\s+/, ""); //remove leading whitespace characters
                                            }
                                    }
                                else
                                    {
                                        break;
                                    }
                            }
                        item = item.replace(/^\s+/, ""); //remove leading whitespace characters
                        str = str + item + '\n';
                   }
            }
        return str;
    }

Above we have a function that is called when the user message text has to be wrapped. The variable that holds the user’s Text Area message is msgVal. The first line in the function removes any leading space in the user’s message. The user himself may create lines, even blank lines, as he types in the message box of the HTML form. The second line in the above function code, sends all the lines the user created into an array, where each element of the array is one of the user’s lines. Here, these user lines are sent to the array, without the \r\n or \n that the browser might have inserted when marking the users lines. Note that some of his lines may be more than 70 characters long.

The third line in the function code declares a string variable that will hold the final string in which no line will be longer than 70 characters. The for-of loop above takes care of this.

There is an if-construct in the for-of loop. The if-part of the construct checks if any line of the array is already less than or equal to 70. If any line is less or equal, it sends it into the string, str, ending it with \n. The else part of the construct breaks down any of the user’s line that was longer than 70 characters to a number that is equal to or less than 70. It does not select a last broken word.

At the end of the function code, the string in which no line is longer than 70 characters is formed. Each line ends with \n. The ending of the user’s lines marked with \r\n or \n by his browser are preserved. However, any \r\n inserted by the browser has been replaced by \n. The formed string is now held in str and is returned.

The Complete Email Message String
The following segment shows how the complete email string is formed:

var wrappedText = textWrap();
var emailMessage = "From: <emailAddress>\nTo: <recipientAddress>\nSubject: subjectString\nserverDateStr -0000\n\nFirst Name: fnameString\nLast Name: lnameString\nMessage: \n\nwrappedText.";

The first line in the code segment calls the textWrap() function above and assigns the returned string to the new variable, wrappedText. The second line forms the complete string for the email beginning with the From field. Note the serverDateStr variable for the date we obtained above. Note the text “ -0000” just after the variable which is used when the email time is local (server) time. After that you have \n\n (double newlines). This will create the blank line you need for the separation between the email header section and the email body. The other double newline characters you see toward the end of the string formation is for formatting in body content; it is not indispensable as the previous.

Well, let us stop here and continue in the next part of the series.

Chrys

Broad Network

Related Articles