Convert HTML to readable text

In mongo data is saved as

<div>Dear Customer,</div><div>An amount of Rs. <a data-value="Payment - Amount to Pay" data-mention="" class="wysiwyg-mention" href="payment_new.amount_to_pay_3xkhkenphf">@Payment - Amount to Pay</a> for your Loan Account Number <a data-value="Payment - Loan Number" data-mention="" class="wysiwyg-mention" href="payment_new.loan_number_rtcivc45ok">@Payment - Loan Number</a> has been received on <a data-value="Payment - Date" data-mention="" class="wysiwyg-mention" href="payment_new.payment_date">@Payment - Date</a> ,vide receipt no <a data-value="Payment - Receipt Number" data-mention="" class="wysiwyg-mention" href="payment_new.receipt_number_5dow863ae">@Payment - Receipt Number</a>.</div>
<div>Payment Mode: <a data-value="Payment - Payment Mode" data-mention="" class="wysiwyg-mention" href="payment_new.payment_mode_chw0gfq6vo">@Payment - Payment Mode</a>.</div>
<div>Please find the receipt attached below.</div>

So when I want to send the email via an external API, in the body I am reading the value from mongo db and directly sending it.

So the in the mail, body is going as

<div>Dear Customer,</div>
<div>An amount of Rs. <a data-value="Payment - Amount to Pay" data-mention="" class="wysiwyg-mention" href="payment_new.amount_to_pay_3xkhkenphf">@Payment - Amount to Pay</a> for your Loan Account Number <a data-value="Payment - Loan Number" data-mention="" class="wysiwyg-mention" href="payment_new.loan_number_rtcivc45ok">@Payment - Loan Number</a> has been received on <a data-value="Payment - Date" data-mention="" class="wysiwyg-mention" href="payment_new.payment_date">@Payment - Date</a> ,vide receipt no <a data-value="Payment - Receipt Number" data-mention="" class="wysiwyg-mention" href="payment_new.receipt_number_5dow863ae">@Payment - Receipt Number</a>.</div>
<div>Payment Mode: <a data-value="Payment - Payment Mode" data-mention="" class="wysiwyg-mention" href="payment_new.payment_mode_chw0gfq6vo">@Payment - Payment Mode</a>.</div>
<div>Please find the receipt attached below.</div>

However, I need to send it like this

Dear Customer, An amount of Rs. 111 for your Loan Account Number 8204221103679 has been received on 24-Jul-2023 ,vide receipt no 1690195463903291.Payment Mode: Cash. Please find the receipt attached below.

How can I modify it?

You can use the DOMParser API to convert HTML to text. Here's how:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var html = `
   <div>Dear Customer,</div>
<div>An amount of Rs. <a data-value="Payment - Amount to Pay" data-mention="" class="wysiwyg-mention" href="payment_new.amount_to_pay_3xkhkenphf">@Payment - Amount to Pay</a> for your Loan Account Number <a data-value="Payment - Loan Number" data-mention="" class="wysiwyg-mention" href="payment_new.loan_number_rtcivc45ok">@Payment - Loan Number</a> has been received on <a data-value="Payment - Date" data-mention="" class="wysiwyg-mention" href="payment_new.payment_date">@Payment - Date</a> ,vide receipt no <a data-value="Payment - Receipt Number" data-mention="" class="wysiwyg-mention" href="payment_new.receipt_number_5dow863ae">@Payment - Receipt Number</a>.</div>
<div>Payment Mode: <a data-value="Payment - Payment Mode" data-mention="" class="wysiwyg-mention" href="payment_new.payment_mode_chw0gfq6vo">@Payment - Payment Mode</a>.</div>
<div>Please find the receipt attached below.</div>
    `;

    var parser = new DOMParser();
    var doc = parser.parseFromString(html, 'text/html');
    var text = doc.body.textContent || "";
    console.log(text);


 //or use the values from html use the id and getelement by id or tag

 //let values = {
 // "@Payment - Amount to Pay": document.getElementById('amountToPay').value,
 // "@Payment - Loan Number": document.getElementById('loanNumber').value,
 // "@Payment - Date": document.getElementById('paymentDate').value,
//  "@Payment - Receipt Number": document.getElementById('receiptNumber').value,
 // "@Payment - Payment Mode": document.getElementById('paymentMode').value
//};

let values = {
  "@Payment - Amount to Pay": "111",
  "@Payment - Loan Number": "8204221103679",
  "@Payment - Date": "24-Jul-2023",
  "@Payment - Receipt Number": "1690195463903291",
  "@Payment - Payment Mode": "Cash"
};

for (let key in values) {
  let regex = new RegExp(key, "g");
  html = html.replace(regex, values[key]);
}
 
var parser = new DOMParser();
    var doc = parser.parseFromString(html, 'text/html');
    var text = doc.body.textContent || "";
    console.log(text);

<!-- end snippet -->

This is how you can read HTML file

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Get the entire HTML of the page including <script> tags
var htmlWithScripts = document.documentElement.outerHTML;

// Create a new DOMParser
var parser = new DOMParser();

// Parse the HTML string into a new document object
var doc = parser.parseFromString(htmlWithScripts, 'text/html');

// Get all script tags
var scripts = doc.getElementsByTagName('script');

// Loop through the script tags and remove each one
for (let i = scripts.length; i--;) {
  scripts[i].parentNode.removeChild(scripts[i]);
}

// Get the updated HTML string without <script> tags
var htmlWithoutScripts = doc.documentElement.outerHTML;

// Print the HTML string without <script> tags
 

 

var html = htmlWithoutScripts;
  var parser = new DOMParser();
    var doc = parser.parseFromString(html, 'text/html');
    var text = doc.body.textContent || "";
    console.log(text);


 //or use the values from html use the id and getelement by id or tag

 //let values = {
 // "@Payment - Amount to Pay": document.getElementById('amountToPay').value,
 // "@Payment - Loan Number": document.getElementById('loanNumber').value,
 // "@Payment - Date": document.getElementById('paymentDate').value,
//  "@Payment - Receipt Number": document.getElementById('receiptNumber').value,
 // "@Payment - Payment Mode": document.getElementById('paymentMode').value
//};

let values = {
  "@Payment - Amount to Pay": "111",
  "@Payment - Loan Number": "8204221103679",
  "@Payment - Date": "24-Jul-2023",
  "@Payment - Receipt Number": "1690195463903291",
  "@Payment - Payment Mode": "Cash"
};

for (let key in values) {
  let regex = new RegExp(key, "g");
  html = html.replace(regex, values[key]);
}
 
var parser = new DOMParser();
    var doc = parser.parseFromString(html, 'text/html');
    var text = doc.body.textContent || "";
    console.log(text);

<!-- language: lang-html -->

   <div>Dear Customer,</div>
<div>An amount of Rs. <a data-value="Payment - Amount to Pay" data-mention="" class="wysiwyg-mention" href="payment_new.amount_to_pay_3xkhkenphf">@Payment - Amount to Pay</a> for your Loan Account Number <a data-value="Payment - Loan Number" data-mention="" class="wysiwyg-mention" href="payment_new.loan_number_rtcivc45ok">@Payment - Loan Number</a> has been received on <a data-value="Payment - Date" data-mention="" class="wysiwyg-mention" href="payment_new.payment_date">@Payment - Date</a> ,vide receipt no <a data-value="Payment - Receipt Number" data-mention="" class="wysiwyg-mention" href="payment_new.receipt_number_5dow863ae">@Payment - Receipt Number</a>.</div>
<div>Payment Mode: <a data-value="Payment - Payment Mode" data-mention="" class="wysiwyg-mention" href="payment_new.payment_mode_chw0gfq6vo">@Payment - Payment Mode</a>.</div>
<div>Please find the receipt attached below.</div>

<!-- end snippet -->

You can convert your HTML code to pure text, by using DOMParser, or by creating an element, setting its innerHTML property to the code and then getting the string by the innerText property.

Like this:

var code = 'Apple is a <span style="color: red">red</span> colored fruit';

var tmp = document.createElement('div');
tmp.innerHTML = code;
var result = tmp.innerText;

console.log(result);
// --> Apple is a red colored fruit

If you really want to display the whole text without any linebreaks, a simple solution would be to insert a <style> tag in the head of the mail that contains

div {
  display: inline;
}