Indexing words copy and paste

by Julian

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Index Tracker</title>
    <style>
        #output {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            background: #f9f9f9;
        }
    </style>
</head>
<body>
    <h1>Word Index Tracker</h1>
    <p>Original Text: <span id="original-text"></span></p>
    <textarea id="text-box" rows="5" cols="50" placeholder="Paste text here to see indexes"></textarea>
    <div id="output">Indexes will appear here...</div>
    </body>
</html>

JavaScript

// Original string
        const originalString = "As you can see the script does not give unique indexes to words that are duplicated in the script. The gets the same index throughout the script.";
        document.getElementById('original-text').innerText = originalString;

        // Create a map of words to their indexes
        const wordIndexMap = {};
        originalString.split(/\s+/).forEach((word, index) => {
            wordIndexMap[word] = index;
        });

        // Textbox and output elements
        const textBox = document.getElementById('text-box');
        const output = document.getElementById('output');

        // Event listener for tracking changes in the text box
        textBox.addEventListener('input', () => {
            const pastedWords = textBox.value.split(/\s+/);
            const indexes = pastedWords
                .filter(word => word in wordIndexMap) // Only track words that are in the original text
                .map(word => wordIndexMap[word]); // Map to their indexes

            // Display the indexes
            output.innerText = `Indexes of words: ${indexes.join(', ')}`;
        });