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

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，但不是很成功。

我想我两者都是

1. 未正确获取现有ID。
2. 没有得到正确格式化的输出显示(输出显示为ID 1 funciton() {...}而不是期望的结果

Answer 1

.text方法可以与函数参数一起使用，以及它的参数(其中第二个是旧的文本内容):

$(".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 "后面跟着平方整数，使用模板字面值追加。

---

我对一个香草JS替代方案的看法:

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