如何根据原来的内容将动态文本内容附加到现有文本内容的末尾

Question

我目前正在制作 chrome 扩展，并希望在现有网站上显示更多内容。

给出以下html

<p class="c1 c2">ID 1</p>
<p class="c1 c2">ID 2</p>
...
<p class="c1 c2">ID 20</p>

我想对ID#追加修改，追加到末尾所以上面的例子将被转换为以下

在下面的示例结果中，我得到了 ID 号并将 ID 平方，然后将“SQ #”附加到现有行。

<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>

我怎样才能做到这一点？

我尝试使用 $(".c1.c2").append，但并不成功。

我想我都是

没有正确获取现有 ID。
未正确设置输出格式以显示（输出显示为 ID 1 funciton() {...} 而不是所需结果

Answer 1

.text method 可以与函数参数一起使用，连同它的个参数（第二个是旧文本内容）：

$(".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 也与函数参数一起使用。正则表达式 /ID (\d+)/ 匹配任何 "ID " 后跟一个任意的非负整数。第一个参数 fullMatch 被重用，" SQ " 后跟平方整数使用 template literals.

附加

我对普通 JS 替代方案的看法：

document.querySelectorAll(".c1.c2")
  .forEach((elem) => elem.textContent = elem.textContent
    .replace(/ID (\d+)/, (fullMatch, id) => `${fullMatch} SQ ${id ** 2}`));

Answer 2

使用纯 js::

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>

如何根据原来的内容将动态文本内容附加到现有文本内容的末尾

How can I append dynamic text contents to the end of existing text contents based on what WAS in it originally

javascript

jquery

google-chrome-extension