I have a html code with multiple tags which is having text in it.
Problem Statement : I want to create a csv with headers and write a text in html tags in the respective column of csv and then want a downloadable button in a UI with which I can download the csv.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<tbody>
<tr data-index="0">
<td>
<div class="card border-left-success shadow h-100 py-2 mb-2 ml-2">
<div class="card-body">
<h4 class="card-title mb-2 font-weight-bold">Service Name -1 </h4>
<div class="clearfix my-3"></div>
<h5 class="card-text">Regarding Service Name-1</h5>
<h5><span class="badge badge-pill badge-success"><a title="Job Details" target="_blank"
href="hhh" class="text-white">DOG</a> </span> <span
class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
class="text-white">CAT</a> <a title="Volumetric report" class="text-white"
target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
title="Dup report" class="text-white" href="hhh"><i class="fas fa-copy"></i></a> <a
title="Embargo Privacy Filter Report" class="text-white" href="hhh"><i
class="fas fa-file-excel"></i></a> <a title="CAC report" class="text-white"
href="hhh"><i class="fas fa-file-signature"></i></a> <a
title="Existing Source Place Report" class="text-white" href="hhh"><i
class="fas fa-file-archive"></i></a> <a title="VVS Validation Failed Report"
class="text-white" href="hhh"><i class="fas fa-file-code"></i></a> <a
title="Job report" class="text-white" href="hhh"><i
class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> <span
class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
class="text-white">LION</a> <a title="Volumetric report" class="text-white"
target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
title="Job report" class="text-white" href="hhh"><i
class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> <span
class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
class="text-white">TIGER</a> <a title="Volumetric report" class="text-white"
target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
title="Job report" class="text-white" href="hhh"><i
class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> <span
class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
class="text-white">RABBIT</a> <a title="Volumetric report" class="text-white"
target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
title="Job report" class="text-white" href="hhh"><i
class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a> </span> </h5>
<div class="text-muted"><small><i class="fa fa-user"></i> Submitted By: xyz On: 7/29/2022,
11:19:24 AM </small></div>
<div class="text-muted"><small><i class="fa fa-envelope"></i> Email To: [email protected]</small>
</div>
<div class="my-2 clearfix">
<div class="row">
<div class="col-10">
<a class="btn btn-sm btn-light btn-icon-split copier float-left"
data-clipboard-text="uihfg" title="Click to Copy">
<span class="icon text-gray-600"><i class="fas fa-hdd"></i> NFFS</span>
<span class="text">mycomputer/folder</span>
</a>
</div>
<div class="col">
<span class="float-right"> <span>
<a tabindex="0" class="btn btn-sm btn-dark float-right" role="button"
title="" onclick="yu" data-original-title="Payload"><i
class="fas fa-info-circle"></i></a>
</span></span>
</div>
</div>
</div>
</div>
</div>
</td>
<td><a target="_blank" href="hhh">4567</a></td>
</tr>
<tr data-index="1">
<td>
<div class="card border-left-success shadow h-100 py-2 mb-2 ml-2">
<div class="card-body">
<h4 class="card-title mb-2 font-weight-bold">Service Name -2</h4>
<div class="clearfix my-3"></div>
<h5 class="card-text"> Regarding Service Name-2</h5>
<h5><span class="badge badge-pill badge-success"><a title="Job Details" target="_blank"
href="hhh" class="text-white">DOG</a> </span> <span
class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
class="text-white">CAT</a> <a title="Volumetric report" class="text-white"
target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
title="Dup report" class="text-white" href="hhh"><i class="fas fa-copy"></i></a> <a
title="Embargo Privacy Filter Report" class="text-white" href="hhh"><i
class="fas fa-file-excel"></i></a> <a title="CAC report" class="text-white"
href="hhh"><i class="fas fa-file-signature"></i></a> <a
title="Existing Source Place Report" class="text-white" href="hhh"><i
class="fas fa-file-archive"></i></a> <a title="VVS Validation Failed Report"
class="text-white" href="hhh"><i class="fas fa-file-code"></i></a> <a
title="Job report" class="text-white" href="hhh"><i
class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> </h5>
<div class="text-muted"><small><i class="fa fa-user"></i> Submitted By: abc On: 6/9/2022,
8:21:30 PM </small></div>
<div class="text-muted"><small><i class="fa fa-envelope"></i> Email To: [email protected]</small>
</div>
<div class="my-2 clearfix">
<div class="row">
<div class="col-10">
<a class="btn btn-sm btn-light btn-icon-split copier float-left"
data-clipboard-text="uiih/" title="Click to Copy">
<span class="icon text-gray-600"><i class="fas fa-hdd"></i> SSS</span>
<span class="text">mycomputer/folder/</span>
</a>
</div>
<div class="col">
<span class="float-right"> <span>
<a tabindex="0" class="btn btn-sm btn-dark float-right" role="button"
title="Payload" onclick="showJsonPopover(hhhh)"><i
class="fas fa-info-circle"></i></a>
</span></span>
</div>
</div>
</div>
</div>
</div>
</td>
<td><a target="_blank" href="hhh">7634</a></td>
</tr>
<tr data-index="2">
<td>
<div class="card border-left-danger shadow h-100 py-2 mb-2 ml-2">
<div class="card-body">
<h4 class="card-title mb-2 font-weight-bold">Service Name -3</h4>
<div class="clearfix my-3"></div>
<h5 class="card-text"> Regarding Service Name-3</h5>
<h5><span class="badge badge-pill badge-success"><a title="Job Details" target="_blank"
href="hhh" class="text-white">DOG</a> <a title="Resume Staging" class="text-white"
href="hhh"><i class="fas fa-play-circle"></i></a> </span> <span
class="badge badge-pill badge-danger"><a title="Job Details" target="_blank" href="hhh"
class="text-white">CAT</a> </span> </h5>
<div class="text-muted"><small><i class="fa fa-user"></i> Submitted By: uui On: 6/9/2022,
8:38:17 AM </small></div> <div class="text-muted"><small><i class="fa fa-envelope"></i>
Email To: [email protected]</small>
</div>
<div class="my-2 clearfix">
<div class="row">
<div class="col-10">
<a class="btn btn-sm btn-light btn-icon-split copier float-left"
data-clipboard-text="xml" title="Click to Copy">
<span class="icon text-gray-600"><i class="fas fa-hdd"></i> YU3</span>
<span class="text">mycomputer/folder/</span>
</a>
</div>
<div class="col">
<span class="float-right"> <span>
<a tabindex="0" class="btn btn-sm btn-dark float-right" role="button"
title="Payload" onclick="showJsonPopover(yuh)"><i
class="fas fa-info-circle"></i></a>
</span></span>
</div>
</div>
</div>
</div>
</div>
</td>
<td><a target="_blank" href="yuhg">9087</a></td>
</tr>
<tr data-index="3">
<td>
<div class="card border-left-danger shadow h-100 py-2 mb-2 ml-2">
<span>
<i class="fa fa-download" aria-hidden="true"></i>
</span>
</body>
</html>
Expected CSv :
if <span> tag of DOG has a class = 'badge-success' then in a DOG column success should get inserted.
if any one of the column is absent then - should appear in csv.
Reffer fiddle link : https://jsfiddle.net/f5kc1g2d/