如何在內容Java腳本中替換數組項

Question

我有這個html代碼：

<p class="Chords">[A]     [B]    [C]</p>
<p> Some Text Goes Here </p>
<p class="Chords">[D]     [E]    [F]</p>
<p> Some Text Goes Here </p>
<p class="Chords">[G]     [H]    [I]</p>
<p> Some Text Goes Here </p>
<p class="Chords">[J]     [K]    [L]</p>
<p> Some Text Goes Here </p>

我有這樣的數組

["1","2","3","4","5","6","7","8","9","10","11","12"]

我想替換具有Chords類的p標簽中的數組項，並且我的Content應該像這樣：

<p class="Chords"> 1     2    3</p>
<p> Some Text Goes Here </p>
<p class="Chords"> 4     5    6</p>
<p> Some Text Goes Here </p>
<p class="Chords"> 7     8    9</p>
<p> Some Text Goes Here </p>
<p class="Chords"> 10     11    12</p>
<p> Some Text Goes Here </p>

Answer 1

您應該這樣做，首先必須提取所有需要替換的字符，然后循環遍歷它們，並使用charCode從數組中找到每個字符的值。

 const array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"] const places = $("#container").html().match(/\\[[AZ]\\]/g) places.forEach(char => { const index = char.charCodeAt(1) - 65 const template = $("#container").html(); $("#container").html(template.replace(char, array[index])) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <p class="Chords">[A] [B] [C]</p> <p> Some Text Goes Here </p> <p class="Chords">[D] [E] [F]</p> <p> Some Text Goes Here </p> <p class="Chords">[G] [H] [I]</p> <p> Some Text Goes Here </p> <p class="Chords">[J] [K] [L]</p> <p> Some Text Goes Here </p> </div> 

Answer 2

您可以使用此正則表達式替換[value] text.replace(/\\[(.*?)\\]/g

 $(document).ready(function() { var arr = ["1","2","3","4","5","6","7","8","9","10","11","12"]; var text = $("#text").text(); var count = -1; $("#text").text(text.replace(/\\[(.*?)\\]/g, function() { count = count + 1; return arr[count] })); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='text'> <p class="Chords">[A] [B] [C]</p> <p> Some Text Goes Here </p> <p class="Chords">[D] [E] [F]</p> <p> Some Text Goes Here </p> <p class="Chords">[G] [H] [I]</p> <p> Some Text Goes Here </p> <p class="Chords">[J] [K] [L]</p> <p> Some Text Goes Here </p> </div> 

Answer 3

使用Chords類獲取所有p元素，然后遍歷arr以+3遞增，並替換p的textContent。

 const arr = ["1","2","3","4","5","6","7","8","9","10","11","12"]; const pEles = document.querySelectorAll('.Chords'); for(let i = 0, j = 0; i < arr.length; i = i+3, j++) { pEles[j].textContent = `${arr[i]} ${arr[i+1]} ${arr[i+2]}`; } 

 <p class="Chords">[A] [B] [C]</p> <p> Some Text Goes Here </p> <p class="Chords">[D] [E] [F]</p> <p> Some Text Goes Here </p> <p class="Chords">[G] [H] [I]</p> <p> Some Text Goes Here </p> <p class="Chords">[J] [K] [L]</p> <p> Some Text Goes Here </p>