Question

我想替换下面示例中的[space] - [space]部分

This - is - an - example - message

（包括减号前后的空格）

带

<div class="withthiscss">xx</div>

HTML是：

<p class="product-title" id="fixthistitle">This - is - an - example - message</p>

我只想更改包含＆＃39; fixthistitle＆＃39;的ID。

所以最终的结果是：

<p class="product-title" id="fixthistitle">This<div class="withthiscss">xx</div>is<div class="withthiscss">xx</div>an<div class="withthiscss">xx</div>example<div class="withthiscss">xx</div>message</p>

通常只需简单地更改HTML中的HTML即可获得所需的格式，但这是预生成的文本，因此我无法更改。因此我需要一个JS / jQuery解决方案吗？

也许有人可以分享如何实现这一目标？我希望这对某人有意义。

编辑：

抱歉，我的不好，ID应该始终是唯一的。

反正;非常感谢您的答案/解决方案。非常感谢！

Answer 1

id应该是唯一的，因此请改用class

您可以使用 html() 进行迭代并更新内容
使用 split('-') （或使用正则表达式 split(/\s+-\s+/) ）拆分内容
现在使用 join()

<div class="withthiscss">xx</div>

$('#fixthistitle').html(function(i, v) {
  return v.split('-').join('<div class="withthiscss">xx</div>')
});

.withthiscss {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="product-title" id="fixthistitle">This - is - an - example - message</p>

使用正则表达式

$('#fixthistitle').html(function(i, v) {
  return v.split(/\s+-\s+/).join('<div class="withthiscss">xx</div>')
});

.withthiscss {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="product-title" id="fixthistitle">This - is - an - example - message</p>

Answer 2

您可以在-上拆分文字，然后使用div重新加入：

＆＃13;

  $('#fixthistitle').html( $('#fixthistitle').html().split(' - ').join('<div class="withthiscss">xx</div>') );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="product-title" id="fixthistitle">This - is - an - example - message</p>

＆＃13;

Answer 3

如评论中已经提到的，如果要对多个项目/元素执行此任务，请使用class而不是id。 jQuery + regex方法将是：

$('.fixthistitle').each(function(i, v) {
  var s = $(this).text();
  $(this).html(s.replace(/\s-\s/, '<div class="withthiscss">xx</div>'));
});

Answer 4

一种可能的解决方案：

＆＃13;

$('#fixthistitle').html(function(i, html) {
    return html.split(/\s+-\s+/).join('<div class="withthiscss">xx</div>');
});

＆＃13;

.withthiscss {
    color: #00f;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="product-title" id="fixthistitle">This - is - an - example - message</p>

＆＃13;

Answer 5

$('#fixthistitle').html(function() {
  var find = " - ";
  var regex = new RegExp(find, "g");
  return $(this).html().replace(regex, '<div class="withthiscss">xx</div>');
});

.withthiscss {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="product-title" id="fixthistitle">This - is - an - example - message</p>

Answer 6

这可以做到：

var k = $("#fixthistitle").text();
str= k.replace(/[ ]+-[ ]+/g,'<div class="withthiscss">xx</div>');
$("#fixthistitle").html(str);

工作代码here

Answer 7

要替换“ - ”部分，您可以使用正则表达式

"This - is - an - example - message".replace(/ - /g,"<div class='withthiscss'>xx</div>")

现在，由于它首先以HTML格式提供，我们需要从HTML标记中获取文本。这是代码

var originalText = $('#fixthistitle').text(),
    transformedText = originalText.replace(/ - /g,"<div class='withthiscss'>xx</div>")

$('#fixthistitle').text(transformedText)

Answer 8

ID应该是唯一的!!!

$("#fixthistitle").each(function() {
    var str = $(this).text();
    var res = str.replace(" - ", "whatever");
    $(this).text(res);
});

但是这会在找到第一次出现后停止。因此，您需要通过类属性或数据属性来标识所需的行。然后它会工作。

否则你可以试试这个：

$("p").each(function() {
    if ($(this).attr('id') == 'fixthistitle')
    {
        var str = $(this).text();
        var res = str.replace(/\s-\s/g, ' ');
        $(this).text(res);
    }
});

依赖：jQuery 1.9.x但它应该适用于大多数版本的jQuery

仅替换目标ID中的字符串

8 个答案: