Untitled
unknown
plain_text
a month ago
3.0 kB
36
Indexable
Never
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Replacer Tool</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 80%; max-width: 800px; } h1 { text-align: center; } .input-section, .output-section { margin-bottom: 20px; } textarea { width: 100%; height: 150px; padding: 10px; box-sizing: border-box; margin-bottom: 10px; } input { width: calc(50% - 20px); padding: 10px; box-sizing: border-box; margin-right: 10px; } button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } </style> </head> <body> <div class="container"> <h1>Text Replacer Tool</h1> <div class="input-section"> <textarea id="input-text" placeholder="Enter your text here..."></textarea> <input type="text" id="find-text" placeholder="Find what..."> <input type="text" id="replace-text" placeholder="Replace with..."> <button onclick="replaceText()">Replace Text</button> </div> <div class="output-section"> <h2>Output</h2> <textarea id="output-text" readonly></textarea> </div> </div> <script> function replaceText() { // Get the input values const inputText = document.getElementById('input-text').value; const findText = document.getElementById('find-text').value; const replaceText = document.getElementById('replace-text').value; // Handle the case when the find text is empty if (findText === '') { alert('Please enter the text to find.'); return; } // Perform the replacement const regex = new RegExp(findText, 'g'); const outputText = inputText.replace(regex, replaceText); // Display the output document.getElementById('output-text').value = outputText; } </script> </body> </html>
Leave a Comment