从载入的外部HTML文件中替换文本的jQuery方法

Question

我使用这段代码从另一个HTML文件中加载内容：

<script> 
    $(function(){
      $("#includedContent").load("reslist.html"); 
    });
</script>


<div id="includedContent"></div>

reslist.html文件包含以下脚本：

<div id="sub-menu-column" align="left"><h2>
     Smith Residence<br />
     Smith Pool<br />
     Fis Residence<br />
     Res Residence
</h2></div>

它已正确加载到我的页面中。 但现在：我如何替换加载的内容中的字符串？因为我想以红色字体加载文本“Smith Residence”。

- MRT46

---

它会一直显示“史密斯住所”，还是会改变？ - Reinstate Monica Cellio

每个页面上都会有另一个红色的标题。因此，文本是固定的。 - MRT46

Answer 1

使用.load()回调函数，它将用一个包含文本的替换问题中的文本，然后您可以使用css进行修改... Javascript

$(function(){
    $("#includedContent").load("reslist.html", function() {
        $(this).html($(this).html().replace("Smith Residence", "<span class='red'>Smith Residence</span>"));
    }); 
});

CSS

.red {
    color: red;
}

- Reinstate Monica Cellio

---

谢谢你，Archer。这正是我一直在寻找的！ - MRT46

没问题 - 很高兴能帮忙 :) - Reinstate Monica Cellio

Answer 2

你可以使用Ajax调用代替.load函数，并在将其附加到容器之前替换所需的文本。

例如：

jQuery.ajax({
  url: "reslist.html",
  success: function(data) {
    data = data.replace(/(Smith Residence)/, "<span style='color: red;'>$1</span>");
    jQuery("#includedContent").html(data);
  }
});

希望这能有所帮助，

敬礼，

马塞洛

- Mindastic

---

我无法让Mindastic工作。但是另一个答案正是我正在寻找的。谢谢。 - MRT46