在字符串后将文本换行 - 使用 jquery/javascript

Question

我想使用 JavaScript/JQuery 而不是 php 将文本括在单词"Price"之后。我尝试跟随，但它不起作用。我使用了一个我从 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，这不是问题。如果你从基础知识开始，你一定会学到它。我刚刚更改了内部HTML(标签内的内容(。希望这有帮助！