Question 217290 in Html Question posted in
Some basic documentation can be found here.

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?

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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
    Login or Signup to reply.
  3. 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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search