hola chicos.


¿Podría alguien ayudarme a escribir la función JS que tomará una cadena (palabra) como un argumento? Y luego agregue un estilo adicional (cambio de color, por ejemplo) para todas estas palabras en el HTML. No sé dónde se encuentra. Esta "palabra" puede estar dentro de <div>, o <p> o incluso <b & gt;.

EX:

HTML:

<p id="p1">Hello World!</p>
<div>Hello World!</div>

function Change(string word){
  //change font color to red
}

Función de llamada:

Change("Hello")

Resultado:

Todas las palabras " hola " en el HTML tienen color de fuente rojo.

Por cierto, ¿es posible escribir algo como este?

1
bodkia22 9 jun. 2021 a las 00:17

3 respuestas

La mejor respuesta

Aquí hay un ejemplo muy básico. Tenga en cuenta que si bien esto es insensible de la caja, reemplazará todas las ocurrencias con cualquier caso que proporcione. Por ejemplo, en el bloque a continuación, puse en "Hello", que establece la única ocurrencia de hello a Hello. Por supuesto, podría eliminar el i en las banderas de la regex para que vuelva a distinguir caso, pero tendría que ejecutar la función dos veces con ambos casos para resaltar ambas instancias.

function color(str, color)
{
  var rx = new RegExp(str, "ig");
  var replaced = document.body.innerHTML.replaceAll(rx, "<span style='color:"+color+"'>"+str+"</span>");
  document.body.innerHTML = replaced;
}

color("Hello", "red");
<p>Hello world</p>
<p>This block contains the word "hello."</p>
1
David 8 jun. 2021 a las 21:27

Aquí hay un método que encontrará la palabra y reemplazará con un <span class='red'> word </span>. He establecido la clase UPA llamada 'Rojo' con el estilo. Esto es muy rudimentario, pero funciona para aplicaciones simples. Hay explicaciones en los comentarios a continuación.

function Change(word) {
  //find all html elements on the page inside the body tag
  let elems = document.querySelectorAll("body *");
  // get our replacement ready
  let span = "<span class='red'>" + word + "</span>";
  //loop through all the elements
  for (let x = 0; x < elems.length; x++) {
    // for each element, 'split' by the word we're looking for, then 'join' it back with the replacement
    elems[x].innerHTML = elems[x].innerHTML.split(word).join(span);
  }
}

Change('Hello', 'Goodbye');
.red {
  color: red;
}
<p id="p1">Hello World!</p>
<div>Hello World!</div>
1
Kinglish 8 jun. 2021 a las 22:10

CSS está hecho para el estilo. Use JS para agregar la clase a su elemento HTML.

La función:

Pase la cadena para buscar y el selector / s para buscar, en mi caso, estoy buscando todas las etiquetas en el dom y devolviendo una matriz [...document.getElementsByTagName('*')].

Definimos una matriz para mantener los elementos no restringidos Queremos buscar y otro que mantiene las etiquetas restringidas restringida Queremos saltar. Luego, la matriz output con !restricted.includes(tag.nodeName.toLowerCase(), esto comprueba para ver si nuestro restringido es una matriz no incluye un elemento de nuestra consulta dom. Para los elementos que devuelven verdadero , los empujamos a nuestra matriz output - & gt; output.push(tag)

Una vez que tengamos nuestra matriz output llena con las etiquetas que queremos buscar, buscamos la etiqueta para nuestra string - & gt; tag.innerText.includes(string) y muy importante: !(tag.textContent.match(/\n/g)||[]).length se asegurará de que sea el nodo secundario correcto, si esto devuelve true , Reemplazamos las etiquetas innerHTML y simplemente envuelves nuestra cadena con span Las etiquetas que ahora contienen una clase que está diseñada, ya que queremos que se establezca, y GT;

tag.innerHTML = tag.innerText.replace(string, `<span class="red">${string}</span>`)
const els = [...document.getElementsByTagName('*')]
const string = "Hello"

function Change(string, els) {
  const restricted = ['html', 'body', 'head', 'style', 'meta', 'script']
  const output = []
  els.forEach(tag => !restricted.includes(tag.nodeName.toLowerCase()) ? output.push(tag) : null)
  output.forEach(tag => tag.innerText.includes(string) && !(tag.textContent.match(/\n/g) || []).length ? tag.innerHTML = tag.innerText.replace(string, `<span class="red">${string}</span>`) : null)
}

Change(string, els)
.red {
  color: red;
}
<p id="p1">Hello World!</p>
<div>Hello World...</div>

<div>
  <ul>
    <li>Hello World.</li>
  </ul>
</div>

<p>
  <a href="#">Hello <span>World</span></a>
</p>

<table border="1">
<tr>
  <th>Hello</th><th>World</th>
  </tr>
<tr>
  <td>World</td><td>Hello</td>
  </tr>
</table>
0
dale landry 8 jun. 2021 a las 23:54