I am currently making chrome extension, and would like to display additional content to the existing website.
Given following html
<p class="c1 c2">ID 1</p>
<p class="c1 c2">ID 2</p>
...
<p class="c1 c2">ID 20</p>
I would like to append modification to the ID # and append it to the end So above example would be transformed to following
In following example result, I got the ID number and squared away the ID, then appended "SQ #" to the existing line.
<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>
How can I achieve this?
I tried to use the $(".c1.c2").append
, but was not really successful.
I think I am both
ID 1 funciton() {...}
instead of desired resultThe .text
method can be used with a function argument, along with its arguments (the second of which is the old text content):
$(".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
is also used with a function argument.
The regular expression /ID (\d+)/
matches any "ID "
followed by an arbitrary, non-negative integer.
The first argument, fullMatch
, is reused, and " SQ "
followed by the squared integer is appended using template literals.
My take on a vanilla JS alternative:
document.querySelectorAll(".c1.c2")
.forEach((elem) => elem.textContent = elem.textContent
.replace(/ID (\d+)/, (fullMatch, id) => `${fullMatch} SQ ${id ** 2}`));