Convert HTML to readable text

Question

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?

Why do you need to? Email can be sent as HTML, so to the receiver it looks like normal text. — evolutionxbox, Jul 27 '23 at 09:31
Does this answer your question? [How can get the text of a div tag using only javascript (no jQuery)](https://stackoverflow.com/questions/10370204/how-can-get-the-text-of-a-div-tag-using-only-javascript-no-jquery) — Justinas, Jul 27 '23 at 09:33
Does this answer your question? [Converting html to text with Python](https://stackoverflow.com/questions/14694482/converting-html-to-text-with-python) — I_Al-thamary, Jul 27 '23 at 09:45

I_Al-thamary · Answer 1 · 2023-07-27T15:29:42.757

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

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

This is how you can read HTML file

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

   <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>

score 0 · Answer 2 · answered Jul 27 '23 at 15:05

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

score 0 · Answer 3 · answered Jul 27 '23 at 15:15

0

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;
}

answered Jul 27 '23 at 15:15

Johannes

64,305
18
73
130

Convert HTML to readable text

3 Answers3