javascript - 从 jquery 加载的外部 html 文件替换文本

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”。

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;
}

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);
  }
});

希望这可以帮助，

问候，

马塞洛