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

Question

我想使用 JavaScript/JQuery 而不是 php 在“价格”一词后面将文本换行。我尝试跟随但它不起作用。我使用了我从 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