[ Foro de Javascript ]

no resalta palabras

buenas tarde cómo están? es que estoy realizando una extension chrome para-JavaScript, su función es que en unos cuadros de texto se pueda agregar unas palabras y según el campo utilizado me resalte las palabras de la web visitada de un color característico, soy totalmente principiante, ese es el cumple sus principales funciones.

EL PROBLEMA ES QUE NO ME RESALTA LAS PALABRAS Y REVISANDO LA CONOSOLA CUMPLE CON TODOS LOS PASOS Y NO HAY ERROR DE CODIGO

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
document.addEventListener("DOMContentLoaded", function() {
 var saveButton = document.getElementById("save-button");
 var agresivasInput = document.getElementById("agresivas-input");
 var ofensivasInput = document.getElementById("ofensivas-input");
 var buenasInput = document.getElementById("buenas-input");
 var especialesInput = document.getElementById("especiales-input");
 var nuevasInput = document.getElementById("nuevas-input");
 var materialInput = document.getElementById("material-input");
 var destacadasInput = document.getElementById("destacadas-input");

 // Cargar las palabras clave guardadas
 loadKeywordsFromLocalStorage();

 saveButton.addEventListener("click", function() {
   var agresivas = parseKeywords(agresivasInput.value);
   var ofensivas = parseKeywords(ofensivasInput.value);
   var buenas = parseKeywords(buenasInput.value);
   var especiales = parseKeywords(especialesInput.value);
   var nuevas = parseKeywords(nuevasInput.value);
   var material = parseKeywords(materialInput.value);
   var destacadas = parseKeywords(destacadasInput.value);
   console.log(agresivas);
   console.log(ofensivas);
   console.log(buenas);
   console.log(especiales);
   console.log(destacadas);
   console.log(nuevas);
   console.log(material);

   saveKeywordsToLocalStorage(agresivas, ofensivas, buenas, especiales, nuevas, material, destacadas);
   console.log("Palabras clave guardadas.");
   highlightKeywords({ agresivas, ofensivas, buenas, especiales, nuevas, material, destacadas });
 });

 function loadKeywordsFromLocalStorage() {
   agresivasInput.value = getKeywordsFromLocalStorage("agresivas");
   ofensivasInput.value = getKeywordsFromLocalStorage("ofensivas");
   buenasInput.value = getKeywordsFromLocalStorage("buenas");
   especialesInput.value = getKeywordsFromLocalStorage("especiales");
   nuevasInput.value = getKeywordsFromLocalStorage("nuevas");
   materialInput.value = getKeywordsFromLocalStorage("material");
   destacadasInput.value = getKeywordsFromLocalStorage("destacadas");
 }

 function saveKeywordsToLocalStorage(agresivas, ofensivas, buenas, especiales, nuevas, material, destacadas) {
   setKeywordsToLocalStorage("agresivas", agresivas);
   setKeywordsToLocalStorage("ofensivas", ofensivas);
   setKeywordsToLocalStorage("buenas", buenas);
   setKeywordsToLocalStorage("especiales", especiales);
   setKeywordsToLocalStorage("nuevas", nuevas);
   setKeywordsToLocalStorage("material", material);
   setKeywordsToLocalStorage("destacadas", destacadas);

   alert("Palabras clave guardadas correctamente.");

   // Resaltar las palabras clave después de guardar
   var keywordsByType = {
     agresivas: agresivas,
     ofensivas: ofensivas,
     buenas: buenas,
     especiales: especiales,
     nuevas: nuevas,
     material: material,
     destacadas: destacadas
   };
   highlightKeywords(keywordsByType);
 }

 function parseKeywords(text) {
   return text.split(",").map(function(keyword) {
     return keyword.trim();
   }).filter(function(keyword) {
     return isValidKeyword(keyword);
   });
 }

 function isValidKeyword(keyword) {
   return keyword && keyword.length > 0;
 }

 function highlightKeywords(keywordsByType) {
   var elements = document.getElementsByTagName("*");

   for (var i = 0; i < elements.length; i++) {
     var element = elements[i];

     for (var type in keywordsByType) {
       var keywords = keywordsByType[type];
       var color;

       switch (type) {
         case "agresivas":
           color = "yellow";
           break;
         case "ofensivas":
           color = "pink";
           break;
         case "buenas":
           color = "blue";
           break;
         case "especiales":
           color = "green";
           break;
         case "destacadas":
           color = "red";
           break;
         case "nuevas":
           color = "orange";
           break;
         case "material":
           color = "gray";
           break;
         default:
           color = "silver";
       }

       for (var j = 0; j < keywords.length; j++) {
         var keyword = keywords[j];

         try {
           var regex = new RegExp("\\b" + keyword + "\\b", "gi");
           var textContent = element.textContent;

           if (textContent) {
             var matches = textContent.match(regex);

             if (matches) {
               for (var k = 0; k < matches.length; k++) {
                 var match = matches[k];
                 var highlightedText = element.innerHTML.replace(new RegExp(`\\b${match}\\b`, "gi"), `<span style="background-color: ${color};">${match}</span>`);
                 element.innerHTML = highlightedText;
               }
             }
           }
         } catch (error) {
           console.error("Error al resaltar la palabra clave:", error);
         }
       }
     }
   }

   // Agregar registro en la consola para verificar el resaltado de palabras clave
   console.log("Palabras clave resaltadas:", keywordsByType);
 }

 function getKeywordsFromLocalStorage(key) {
   var keywords = localStorage.getItem(key);
   return keywords ? keywords : "";
 }

 function setKeywordsToLocalStorage(key, keywords) {
   localStorage.setItem(key, keywords);
 }

 // Resaltar las palabras clave al cargar la página
 loadKeywordsFromLocalStorage();
});