ColorKeyword/index.html at main · Ashish4283/ColorKeyword · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
    <title>Keyword Formatter</title>
    <style>
        .angle-brackets {
            color: red;
        </style> <!-- Should be </style> -->
    </head>
    <body>
        <h1>Keyword Formatter</h1>

        <!-- Text box for input with word and character counters -->
        <textarea id="unformattedText" rows="10" cols="60" style="font-size: 16px;" placeholder="Insert unformatted text here" oninput="updateCounters(this)"></textarea>
        <div>Word Count: <span id="wordCount">0</span></div>
        <div>Character Count: <span id="charCount">0</span></div>

        <br>

        <!-- Convert button -->
        <button onclick="convertText()" style="font-size: 20px;">Convert</button>

        <br>

        <!-- Text box for manual editing with word and character counters -->
        <textarea id="manualText" rows="10" cols="60" style="font-size: 16px;" placeholder="Manual editing"></textarea>
        <div>Word Count: <span id="manualWordCount">0</span></div>
        <div>Character Count: <span id="manualCharCount">0</span></div>

        <!-- Formatted output -->
        <div id="formattedText"></div>

        <script>
            var keywords = []; // Initialize an empty array for keywords

            // Fetch and load keywords from keywords.txt
            fetch('https://ashish4283.github.io/ColorKeyword/keywords.txt')
                .then(response => response.text())
                .then(data => {
                keywords = data.split('\n').map(keyword => keyword.trim()); // Load keywords into the array
                 });

            // Function to format keywords in text
            function formatKeywordsInText(text) {
                var formattedText = text;

                // Iterate through each keyword
                for (var keyword of keywords) {
                    if (keyword) {
                        var regex = new RegExp(`(?<![\\w-])${keyword}(?![\\w-])`, "gi"); // Exclude HTML tag boundaries but allow hyphens
                        formattedText = formattedText.replace(regex, '<span style="font-weight: bold; color: red;">' + keyword + '</span>'); // Replace the keyword with the styled version
                    }
                }

                return formattedText;
            }

            // Function to convert and display formatted text
            function convertText() {
                var manualText = document.getElementById("manualText").value;
                var formattedText = formatKeywordsInText(manualText);
                document.getElementById("formattedText").innerHTML = formattedText;
            }

            // Function to update word and character counters
            function updateCounters(textarea) {
                var words = textarea.value.match(/\S+/g) || [];
                var charCount = textarea.value.length;
                var wordCount = words.length;

                if (textarea.id === "unformattedText") {
                    document.getElementById("wordCount").textContent = wordCount;
                    document.getElementById("charCount").textContent = charCount;
                } else if (textarea.id === "manualText") {
                    document.getElementById("manualWordCount").textContent = wordCount;
                    document.getElementById("manualCharCount").textContent = charCount;
                }
            }
        </script>
    </body>
</html>