JavaScript - resaltar palabras claves en el navegador

 
Vista:
sin imagen de perfil

resaltar palabras claves en el navegador

Publicado por daniel (1 intervención) el 14/07/2023 19:47:54
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();
});
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder