Question

我有以下HTML内容，我想更新从XYZ到ABC的所有范围的HTML。

var HTML = '<div>Testing</div><span>XYZ<a href="#">Link Data</a></span><div>This is content</div><span>XYZ</span>';

我已尝试过以下代码，但似乎是主要的HTML内容正在更新或替换效果很好，但主要内容没有更新，

$.each($(HTML).find("> span"), function(index) {  
  this.innerHTML = this.innerHTML.replace('XYZ', ''ABC'');
});

任何输入？

Answer 1

根据当前JS代码中的逻辑判断，您只想影响其文本中XYZ值的html()元素，而不是所有元素。

为此，您可以为var html = '<div>Testing</div><span>XYZ<a href="#">Link Data</a></span><div>This is content</div><span>XYZ</span>'; $(html).filter('span').html(function(i, h) { return h.replace('XYZ', 'ABC'); }).end().appendTo('div');提供一个功能，您可以使用该功能更新当前值。试试这个：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

＆＃13;

var html = '<div>Testing</div><span>XYZ<a href="#">Link Data</a></span><div>This is content</div><span>XYZ</span>'; 

html = $('<div>' + html + '</div>').find('span').html(function(i, h) {
  return h.replace('XYZ', 'ABC');
}).end().html();

console.log(html);

＆＃13;

如果你只想修改字符串值，那么你可以修改上面的内容中的元素，然后从中返回内容，如下所示：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

＆＃13;

 Map<ScheduleAbsenceHeaderHistoryTypeEnum, ValueObject>
 ....
 public enum ScheduleAbsenceHeaderHistoryTypeEnum {

     ADDITIONAL_HOURS("ADDITIONAL_HOURS"),
     HOLIDAY("HOLIDAY"),
     REMAINING_HOLIDAY_HOURS("REMAINING_HOLIDAY_HOURS"),
     REMAINING_HOLIDAY_DAYS("REMAINING_HOLIDAY_DAYS"),
     TRANSFER_HOLIDAY("TRANSFER_HOLIDAY"),
     INCREMENT_HOLIDAY("INCREMENT_HOLIDAY"),
     ..

＆＃13;

Answer 2

根据我的理解，您想要替换其内容为XYZ的所有跨度的文本，以便您可以写：

＆＃13;

$('span').each(function() {
  if ($(this).text() === "XYZ") {
    $(this).text("ABC");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div>Testing</div>
  <span>XYZ</span>
  <div>This is content</div>
  <span>XYZ</span>
  <p><span>XZZ</span></p>
</body>

＆＃13;

修改

如果您的HTML位于变量中，您可以创建一个新的HTML元素并将HTML放在其上并使用相同的代码。

如果跨度也包含HTML代码，请使用string.prototype.replace()方法来完成这一操作，这里有更新的小提琴：

＆＃13;
＆＃13;
var htmlCode = '<div>Testing</div><span>XYZ</span><div>This is content</div><span>XYZ</span><p><span>XZZ</span></p>'; var div = $('<div></div>'); div.html(htmlCode); div.find('span').each(function() { if ($(this).text().match("XYZ") != null) { $(this).text($(this).text().replace(/XYZ/, "ABC")); } }); console.log(div.html());
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

Answer 3

更新了答案 。使用jquery的Contains()函数，它会在span中找到XYZ文本并替换为ABC并保持儿童数据不变

＆＃13;

var HTML = '<div>Testing</div><span>XYZ<a href="#">Link Data</a></span><div> This is content </div><span> XYZ </span>';
$('body').append(HTML);
$('span:Contains("XYZ")').each(function(){
var a = $(this).children().html() ? $(this).children().html() :"";
  $(this).html('ABC'+a);
  
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 4

请尝试此

<script>
    $.each($('html').find("> span"), function(index) {  
     if($(this).text() == "XYZ") 
        $(this).html('ABC');
});  
</script>

Answer 5

以下代码会将跨度文本从“XYZ”替换为“ABC”

var html = '<div>Testing</div><span>XYZ</span><div>This is content</div><span>XYZ</span>';

var htmlObj = $(html);
htmlObj.filter('span').each(function() {
  if($(this).text() == "XYZ") {
    $(this).text("ABC") 
  }
});

var htmlString = $('<div>').append(htmlObj).html();
console.log(htmlString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 6

var compare = "XYZ";
$("span").filter(function() {

  return $(this).text() == compare;

}).text("ABC")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Testing</div>
<span>XYZ</span>
<div>This is content</div>
<span>XYZ</span>

您可以使用.filter()

描述：将匹配元素集合减少到与选择器匹配的元素或通过函数测试。

Answer 7

例如，此代码段对我有用：

$.each($('span'), function () {
    this.innerHTML = this.innerHTML.replace('XYZ', 'ABC')
})

这是您正在寻找的，或者您可能需要在文档加载时调用IIFE以在页面可用后替换页面中的内容。

更新通过jquery循环的子跨度内容

7 个答案: