JSFiddle - React, Tailwind, and code Playground

by technicaliti

HTML

<textarea id="source" rows="10">
    <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px">
        <tbody>
            <tr>
                <td>
                    <!--Add Your Company Name Or Logo Here-->
                </td>
                <td>Voided Order Notification</td>
            </tr>
        </tbody>
    </table>
    <table align="center" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <table align="center" border="0" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr>
                                <td>
                                    <table align="center" border="0" cellpadding="0" cellspacing="0" style="height:207px; width:570px">
                                        <tbody>
                                            <tr>
                                                <td>Order Number: {orderid}</td>
                                                <td>Ordered on {orderdatetime}</td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">Dear {shippingfirstname} {shippinglastname},
                                                    <p>This email is to inform you that your order number {orderid}, which was originally purchased on {orderdatetime} for the total amount of {ordertotal}, has been entirely voided as per your request.</p>
                                                    <p>If you have any questions about this notification or if you feel you are receiving this in error, please feel free to contact our Customer Service team.</p>
                                             ...

CSS

#source, #destination {
    width:500px;
}

JavaScript

$(document).ready(function () {
    $('#convert').on('click', function (e) {
        var html_to_text = $('#source').val().replace('&nbsp;', ' ').replace(/<[^>]*>/g, '').replace(/(<br>)+/g, '<br>');
        alert(html_to_text);
        $('#destination').val(html_to_text);
        e.preventDefault();
    });
});