使用jquery / javascript在字符串后的span中包裝文本

Question

我想使用JavaScript / JQuery而不是php在“Price”這個詞之后用span包裝文本。 我試過跟隨，但它不起作用。 我使用了一個我從PHP中知道的表達式。

 $('h2#Price').text().replace(/(.*?)Price(.*?)/, '$1 Price <span>$2</span>'); 

 span { background-color:yellow } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2 id="Price">T-shirt Price in Canada</h2> 

我想在“加拿大”中包裝。

Answer 1

您需要使用.html添加跨度

 $('#Price').html(function() { return this.innerText.replace(/(.*)Price(.*)/,'$1 Price <span>$2</span>') }); 

 span { background-color:yellow } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2 id="Price">T-shirt Price in Canada</h2> 

更通用 - 添加一個類，每個類都將一次更改：

 $(function() { $('.price').html(function() { return this.innerText.replace(/(.*)Price(.*)/, '$1 Price <span>$2</span>') }); }); 

 #PriceCAD span { background-color: yellow } #PriceMXN span { background-color: orange } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2 class="price" id="PriceCAD">T-shirt Price in Canada</h2> CAD 12 <h2 class="price" id="PriceMXN">T-shirt Price in Mexico</h2> MXN 175 

Answer 2

嗨請檢查以下代碼以供參考

 $(document).ready(function() { var string_to_slipt = $('#Price').html(); //console.log(string_to_slipt); var ret = string_to_slipt.split("Price"); var str1 = ret[0]; var str2 = ret[1]; $('#Price').html(str1 + 'Price <span>' + str2 + '</span>'); }); 

 span { color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2 id="Price">T-shirt Price in Canada</h2> 

Answer 3

 var text = 'Price in 12312412'; text = text.replace(/(.*Price)(.+)/, '$1 <span>$2</span>'); console.log(text); 

Answer 4

 document.getElementById('price').innerHTML = 'T-shirt Price in <span>Canada</span>'; 

 span { background-color:yellow } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2 id="price">T-shirt Price in Canadaa</h2> 

拿這個，可能是你的代碼中出現了一些類型錯誤，現在我已經解決了這個問題。 你告訴我們你知道小js，這不是問題。 如果你從基礎開始，你一定會學到它。 我剛剛更改了innerHTML（標簽內的東西）。 希望這可以幫助！