76 lines
3.5 KiB
PHP
76 lines
3.5 KiB
PHP
<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 = 'Text copied to clipboard!';
|
|
setTimeout(() => {
|
|
document.getElementById('copied-notice').style.display = 'none';
|
|
}, 1000);
|
|
|
|
})
|
|
.catch(err => {
|
|
// console.error('Failed to copy: ', err);
|
|
});
|
|
}
|
|
</script> |