dwd/tools
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

t

Browse Source
This commit is contained in:
Suvodip
2024-07-11 12:45:10 +05:30
parent d368213568
commit 040c4b87c1
33 changed files with 1042 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
html-cleaner.php
View File

@@ -1,88 +1,76 @@
<?php
require_once('.htac_header.php');
?>
<div class="page-container">
<div class="container-dxc">
<h1 style="text-align: center; font-size: 25px;">HTML Remover</h1>
<label for="htmlInput">Input Text with HTML:</label>
<textarea class="cleanhtml-textarea" id="htmlInput" placeholder="Paste your text with html here..."></textarea>
<button class="button-style" onclick="cleanHTML()" style="width: 100%;">Remove</button>
<label for="cleanedHTML">Cleaned Text:</label>
<textarea class="cleanhtml-textarea" id="cleanedHTML" readonly placeholder="Cleaned Text will appear here..."></textarea>
<P style="display: none; text-align: center;" id="copied-notice"></P>
<button class="button-style" onclick="copyToClipboard()" style="width: 100%;">Copy</button>
<section class="diZContainer diZmxAuto diZmy4">
<h1 class="diZBorderBottom">HTML Remover</h1>
<p class="diZTextJustify">The HTML Remover tool helps you clean text by removing all HTML tags, leaving only plain text. It's perfect for extracting content from HTML code without any formatting.</p>
<div class="diZFlexColumn diZMaxW600 diZmxAuto diZmy20 toolsSection">
<div class="diZmt2 diZFlexColumn">
<label for="htmlInput">Input Text with HTML:</label>
<textarea class="diZTextAreaResizeNone" rows="10" id="htmlInput" placeholder="Paste your text with html here..."></textarea>
</div>
<div class="diZFlexColumn diZItemsCenter">
<button class="diZmt2 " onclick="cleanHTML()"><span>Remove</span></button>
</div>
<div class="diZmt2 diZFlexColumn">
<label for="cleanedHTML">Cleaned Text:</label>
<textarea class="diZTextAreaResizeNone" rows="10" id="cleanedHTML" readonly placeholder="Cleaned Text will appear here..."></textarea>
</div>
<p class="diZDisplayNone" id="copied-notice"></p>
<div class="diZFlexColumn diZItemsCenter">
<button class="diZmt2 " onclick="copyToClipboard()"><span>Copy</span></button>
</div>
</div>
<div>
<!-- diZwFit diZJustifyCenter diZItemsCenter -->
<h3>Usage:</h3>
<ul>
<li><strong>Enter Text with HTML:</strong> Paste your desired text with HTML into the text area provided.</li>
<li><strong>Remove HTML:</strong> Click the "Remove" button to clean the text, stripping out all HTML tags.</li>
<li><strong>View Cleaned Text:</strong> The cleaned, plain text will appear in the output text area below.</li>
<li><strong>Copy Cleaned Text:</strong> Click the "Copy" button to copy the cleaned text to your clipboard.</li>
</ul>
<h3>Features:</h3>
<ul>
<li>Effortlessly removes all HTML tags from the input text.</li>
<li>Provides a user-friendly interface for inputting and viewing text.</li>
<li>Includes a copy function to quickly copy the cleaned text to your clipboard.</li>
<li>Displays a notification when the text is successfully copied to the clipboard.</li>
</ul>
<h3>Example Use Cases:</h3>
<ul>
<li>Writers and editors extracting plain text content from HTML-formatted documents.</li>
<li>Developers cleaning up text before using it in applications or databases.</li>
<li>Content creators preparing text for use in plain text editors or word processors.</li>
</ul>
</div>
</section>
<script>
function cleanHTML() {
const inputHTML = document.getElementById("htmlInput").value;
// Create a temporary element to hold the input HTML
const tempDiv = document.createElement("div");
tempDiv.innerHTML = inputHTML;
// Remove all HTML tags
const plainText = tempDiv.textContent || tempDiv.innerText || "";
document.getElementById("cleanedHTML").value = plainText;
}
function copyToClipboard() {
const cleanedHTML = document.getElementById("cleanedHTML").value;
navigator.clipboard.writeText(cleanedHTML)
.then(() => {
document.getElementById('copied-notice').style.display = 'block';
document.getElementById('copied-notice').innerHTML = 'Slug copied to clipboard!';
})
.catch(err => {
console.error('Failed to copy: ', err);
});
}
</script>
<style>
.page-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
/* background-color: #f4f4f4; */
function cleanHTML() {
const inputHTML = document.getElementById("htmlInput").value;
// Create a temporary element to hold the input HTML
const tempDiv = document.createElement("div");
tempDiv.innerHTML = inputHTML;
// Remove all HTML tags
const plainText = tempDiv.textContent || tempDiv.innerText || "";
document.getElementById("cleanedHTML").value = plainText;
}
.container-dxc {
max-width: 600px;
width: 100%;
background-color: #3d3d3d;
padding: 30px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
function copyToClipboard() {
const cleanedHTML = document.getElementById("cleanedHTML").value;
navigator.clipboard.writeText(cleanedHTML)
.then(() => {
document.getElementById('copied-notice').style.display = 'block';
document.getElementById('copied-notice').innerHTML = 'Text copied to clipboard!';
setTimeout(() => {
document.getElementById('copied-notice').style.display = 'none';
}, 1000);
})
.catch(err => {
// console.error('Failed to copy: ', err);
});
}
.cleanhtml-textarea {
width: 100%;
height: 200px;
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
resize: vertical;
background-color: #3d3d3d;
}
.button-style{
padding: 10px 20px;
background-color: #7d7d7d;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button-style:hover {
background-color: #9d9d9d;
}
</style>
</script>