将HTML转换为可读文本

Question

在Mongo中，数据被保存为

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

所以当我想通过外部API发送电子邮件时，在正文中我正在从MongoDB中读取值并直接发送。

所以在邮件中，正文是这样的。

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

然而，我需要像这样发送它

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.

怎么修改它？

- Aakarshit

---

为什么你需要这样做？电子邮件可以以HTML格式发送，因此对接收者而言，它看起来像普通文本。 - evolutionxbox

这个回答解决了你的问题吗？如何使用纯JavaScript（无需jQuery）获取div标签的文本内容 - Justinas

这个回答解决了你的问题吗？使用Python将HTML转换为文本 - I_Al-thamary

Answer 1

你可以使用DOMParser API将HTML转换为文本。以下是具体步骤：

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

这是你如何阅读HTML文件的方式

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

- I_Al-thamary

Answer 2

你可以通过使用DOMParser或创建一个元素，将其innerHTML属性设置为代码，然后通过innerText属性获取字符串，将HTML代码转换为纯文本。

就像这样：

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

- Codemaster United

Answer 3

如果你真的想要在没有任何换行符的情况下显示整个文本，一个简单的解决方案是在邮件的头部插入一个 <style> 标签，其中包含以下内容。

div {
  display: inline;
}

- Johannes