我目前正在制作chrome擴展，并希望在現有網站上顯示額外的內容。
給定以下html
<p class="c1 c2"/span>> ID 1< /p>
<p class="c1 c2"/span>> ID 2</p>
...
<p class="c1 c2">ID 20< /p>。
我想把修改附加到ID #上，并把它附加到最后。 所以上面的例子將被轉化為以下內容
在下面的例子結果中，我得到了ID號碼，并將ID平方化，然后將 "SQ #"附加到現有的行中。<p class="c1 c2"/span>> ID 1 SQ 1</p>
<p class="c1 c2"/span>> ID 2 SQ 4</p>
...
<p class="c1 c2"/span>> ID 20 SQ 400</p>
我怎樣才能實作這一點呢？
我試圖通過使用 "常量 "來實作。
我試圖使用$(".c1.c2").append，但沒有真正成功。
我想我既是
- 沒有正確獲得現有的ID。
- 沒有得到正確顯示的輸出格式（輸出顯示為
ID 1 funciton() {...}而不是期望的結果
uj5u.com熱心網友回復：
.text方法可以使用一個函式引數，以及its引數（其中第二個引數是舊的文本內容）：
$(".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>/span>
<p class="c1 c2"/span>> ID 1</p>
<p class="c1 c2"/span>> ID 2</p>
<p>...</p>
<p class="c1 c2"/span>> ID 19</p>
<p class="c1 c2"/span>> ID 20</p>/span>.replace也可以使用一個函式引數。
正則運算式/ID (d )/可以匹配任何"ID"后面跟著一個任意的非負整數。
第一個引數，fullMatch，被重復使用，" SQ"后面的平方整數被附加使用模板字樣。
我對vanilla JS替代方案的看法：
document.querySelectorAll(" .c1.c2")
.forEach((elem) => elem.textContent = elem.textContent.
. replace(/ID (d )/, (fullMatch, id) => `${fullMatch} SQ ${id ** 2}`) 。)
uj5u.com熱心網友回復：
使用普通js::
。document. querySelectorAll('.c1').forEach(i => /span> {
i.innerText = `${i.innerText} SQ ${Number（i. innerText.slice(3, i.innerText.length))**2}`
})< p class="c1 c2">ID 1</p>/span>
<p class="c1 c2"/span>> ID 2</p>
<p class="c1 c2"/span>> ID 3</p>
<p class="c1 c2"/span>> ID 10</p>
<p class="c1 c2"/span>> ID 15</p>
<p class="c1 c2"/span>> ID 19</p>
<p class="c1 c2"/span>> ID 20</p>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/321668.html
標籤：
上一篇：如何改變設計位置？