Actualmente estoy creando una extensión de Chrome y me gustaría mostrar contenido adicional en el sitio web existente.
Dado el siguiente html
<p class="c1 c2">ID 1</p> <p class="c1 c2">ID 2</p> ... <p class="c1 c2">ID 20</p>Me gustaría agregar la modificación al ID # y agregarlo al final. Entonces, el ejemplo anterior se transformaría en el siguiente
En el siguiente resultado de ejemplo, obtuve el número de identificación y cuadré la identificación, luego agregué "SQ #" a la línea existente.
<p class="c1 c2">ID 1 SQ 1</p> <p class="c1 c2">ID 2 SQ 4</p> ... <p class="c1 c2">ID 20 SQ 400</p>¿Cómo puedo conseguir esto?
Intenté usar $(".c1.c2").append , pero no tuve mucho éxito.
creo que soy ambos
ID 1 funciton() {...} en lugar del resultado deseadoEl método .text se puede usar con un argumento de función, junto con sus argumentos (el segundo de los cuales es el contenido de texto anterior):
$(".c1.c2").text((_index, oldValue) => oldValue .replace(/ID (\d+)/, (fullMatch, id) => `${fullMatch} SQ ${id ** 2}`)); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="c1 c2">ID 1</p> <p class="c1 c2">ID 2</p> <p>…</p> <p class="c1 c2">ID 19</p> <p class="c1 c2">ID 20</p> .replace también se usa con un argumento de función. La expresión regular /ID (\d+)/ coincide con cualquier "ID " seguido de un número entero arbitrario no negativo. El primer argumento, fullMatch , se reutiliza y " SQ " seguido del entero al cuadrado se agrega usando literales de plantilla .
Mi opinión sobre una alternativa vainilla JS:
document.querySelectorAll(".c1.c2") .forEach((elem) => elem.textContent = elem.textContent .replace(/ID (\d+)/, (fullMatch, id) => `${fullMatch} SQ ${id ** 2}`));Con js simple::
document.querySelectorAll('.c1').forEach(i => { i.innerText = `${i.innerText} SQ ${Number(i.innerText.slice(3, i.innerText.length))**2}` }) <p class="c1 c2">ID 1</p> <p class="c1 c2">ID 2</p> <p class="c1 c2">ID 3</p> <p class="c1 c2">ID 10</p> <p class="c1 c2">ID 15</p> <p class="c1 c2">ID 19</p> <p class="c1 c2">ID 20</p>