只替换目标ID's中的字符串

Replace strings in only targeted ID's

本文关键字：字符串 替换 目标 ID      更新时间：2023-09-26

我想替换下例中的[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>

我只想改变这个ID包含'fixthistitle'。

那么最终结果将是:

<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在那里得到你想要的格式，但这是预生成的文本，所以我不能改变这一点。因此，我需要一个JS/jQuery解决方案吗?

也许有人可以分享如何实现这一点?我希望这对某些人有意义。

编辑:

对不起，ID必须是唯一的。

不管怎样;谢谢你的回答/解决方案。高度赞赏!

id应该是唯一的，所以用class代替

  1. 您可以使用 html() 来迭代和更新
    2. 内容
  2. 使用 split('-') 拆分内容(或使用regex split(/'s+-'s+/) )
  3. 现在用 join()
    4. 连接<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>

使用regex 

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

你可以在-上分割文本，然后与div重新连接:

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

正如在评论中已经提到的，如果您想在多个项目/元素上执行此任务，请使用class而不是id。jQuery + regex的方法是:

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

一个可能的解决方案:

$('#fixthistitle').html(function(i, html) {
    return html.split(/'s+-'s+/).join('<div class="withthiscss">xx</div>');
});
.withthiscss {
    color: #00f;
}
<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() {
  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>

可以使用正则表达式

代替" - "部分
"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)

可以这样做:

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

这里的工作代码

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。但它应该与大多数版本的jQuery兼容

相关文章：