cheeseonamonkey/yeetguitar.html

## yeetguitar.html
<!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>
	<!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>