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

【问题标题】：Wrap text in span after string - using jquery/javascript在字符串之后将文本换行 - 使用 jquery/javascript
【发布时间】：2020-01-19 08:45:31
【问题描述】：

我想使用 JavaScript/JQuery 而不是 php 在“价格”一词之后将文本换行。我试过跟随但它不起作用。我使用了我从 PHP 中知道的表达式。

$('h2#Price').text().replace(/(.*?)Price(.*?)/, '$1 Price &lt;span&gt;$2&lt;/span&gt;');

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>

我想在 span 中包含“in Canada”。

【问题讨论】：

删除? 就可以了。 /(.*)Price(.*)/。 ? 尝试匹配尽可能少的字符，因此它将在 Price 之后选择 0 个字符
@Wendelin 我的代码本身不是正确的 javascript 代码。请再次检查。我不太懂javascript。

标签： javascript jquery regex replace

【解决方案1】：

你需要使用 .html 来添加 spans

$('#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

【讨论】：

现在这也有效。我认为这更好。我可以接受两个答案吗？谢谢亲爱的
@samar 不，您只能接受一个。请参阅第二个示例的更新。还有一个建议：只有我的老阿姨会叫我dear

【解决方案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>

【讨论】：

也很不雅

【解决方案3】：

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

【讨论】：

这将如何反映实际问题？您现在需要将其插入到 DOM 中
你能澄清一下这如何适合这个问题吗？你能修复问题的代码吗？

【解决方案4】：

document.getElementById('price').innerHTML = 'T-shirt Price in &lt;span&gt;Canada&lt;/span&gt;';

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（标签内的东西）。希望这会有所帮助！

【讨论】：