Created
September 6, 2023 13:01
-
-
Save cheeseonamonkey/ee05373600aa648cd6399b7cb5df6448 to your computer and use it in GitHub Desktop.
yeet guitar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>File Upload and Regex Matcher</title> | |
<!-- Include jQuery for simplicity --> | |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
<!-- Include FileSaver.js CDN for saving results --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> | |
<!-- Add Tailwind CSS CDN for styling --> | |
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
</head> | |
<body class="bg-gray-100"> | |
<h1 class="text-3xl text-center mt-8">File Upload and Regex Matcher</h1> | |
<br /> | |
<div class="flex justify-center mt-4"> | |
<label class="mr-4"> | |
<input type="radio" name="inputType" id="fileInputRadio" checked> | |
File Upload | |
</label> | |
<label> | |
<input type="radio" name="inputType" id="textInputRadio"> | |
Raw Text Input | |
</label> | |
</div> | |
<div id="fileInputSection" class="mt-4"> | |
<input type="file" id="fileInput"> | |
<button id="processFile" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">Process File</button> | |
</div> | |
<div id="textInputSection" style="display: none;" class="mt-4"> | |
<textarea id="textInput" rows="6" cols="60" placeholder="Enter raw text" class="border rounded px-3 py-2 w-full"></textarea> | |
<button id="processText" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">Process Text</button> | |
</div> | |
<br /> | |
<small><span>Enter Regex Pattern (advanced):</span><br> | |
<input type="text" style="width: 44%; font-family: mono;" id="regexPattern" value="https:\/\/tabs\.ultimate-guitar\.com\/tab\/([^\/]+)\/([^\/]+)-([^-\/]+)-(\d+)" placeholder="Enter regex pattern" class="border rounded px-3 py-2"></small> | |
<br /><br /><hr /><br /> | |
<h2>Regex Matches:</h2> | |
<pre id="matches"></pre> | |
<h2>Matches in Textbox:</h2> | |
<textarea id="matchesText" rows="12" cols="60" class="border rounded px-3 py-2 float-left"></textarea> | |
<span id="lblMatchesTotalCount" class="text-2xl bold float-left mx-4"> 0 </span> | |
<script> | |
matchesText.addEventListener('input', ()=>{lblMatchesTotalCount.innerText = matchesText.innerText.toString().split('\\n').length}); | |
matchesText.addEventListener('change', ()=>{lblMatchesTotalCount.innerText = matchesText.innerText.toString().split('\\n').length}); | |
const fileInputRadio = document.getElementById('fileInputRadio'); | |
const textInputRadio = document.getElementById('textInputRadio'); | |
const fileInputSection = document.getElementById('fileInputSection'); | |
const textInputSection = document.getElementById('textInputSection'); | |
const processFileButton = document.getElementById('processFile'); | |
const processTextButton = document.getElementById('processText'); | |
fileInputRadio.addEventListener('click', () => { | |
fileInputSection.style.display = 'block'; | |
textInputSection.style.display = 'none'; | |
lblMatchesTotalCount.innerText = matchesText.innerText.toString().split('\n').length | |
}); | |
textInputRadio.addEventListener('click', () => { | |
fileInputSection.style.display = 'none'; | |
textInputSection.style.display = 'block'; | |
lblMatchesTotalCount.innerText = matchesText.innerText.toString().split('\n').length | |
}); | |
processFileButton.addEventListener('click', processFile); | |
processTextButton.addEventListener('click', processText); | |
lblMatchesTotalCount.innerText = matchesText.innerText.toString().split('\n').length | |
function processFile() { | |
const fileInput = document.getElementById('fileInput'); | |
const regexPattern = document.getElementById('regexPattern').value; | |
// Check if a file has been selected | |
if (!fileInput.files || fileInput.files.length === 0) { | |
alert('Please select a file.'); | |
return; | |
} | |
const file = fileInput.files[0]; | |
const reader = new FileReader(); | |
reader.onload = function(event) { | |
const fileContent = event.target.result; | |
const regex = new RegExp(regexPattern, 'g'); | |
const matches = fileContent.match(regex); | |
if (matches) { | |
// Display matches in the "Regex Matches" section | |
const matchesElement = document.getElementById('matches'); | |
matchesElement.textContent = JSON.stringify(matches, null, 2).trim(/\s[\[\]]/g); | |
// Display matches in the "Matches in Textbox" textarea | |
const matchesTextElement = document.getElementById('matchesText'); | |
matchesTextElement.value += "\n"+ matches.join('\n'); | |
} else { | |
matches.innerText = 'No matches found.'; | |
} | |
}; | |
reader.readAsText(file); | |
lblMatchesTotalCount.innerText = matchesText.innerText.toString().split('\n').length | |
} | |
function processText() { | |
const textInput = document.getElementById('textInput').value; | |
const regexPattern = document.getElementById('regexPattern').value; | |
const regex = new RegExp(regexPattern, 'g'); | |
const matches = textInput.match(regex); | |
if (matches) { | |
// Display matches in the "Regex Matches" section | |
const matchesElement = document.getElementById('matches'); | |
matchesElement.textContent = JSON.stringify(matches, null, 2); | |
// Display matches in the "Matches in Textbox" textarea | |
const matchesTextElement = document.getElementById('matchesText'); | |
matchesTextElement.value += "\n"+ matches.join('\n'); | |
} else { | |
matches.innerText = 'No matches found.'; | |
} | |
lblMatchesTotalCount.innerText = matchesText.innerText.toString().split('\n').length | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment