html JSでHTMLファイルをインクルードする。（AJAX）

Posted 2021-05-11

$(function(){
  var tmp = $.ajax({
    url: '/lbi/contact.html',
    cache: false,
    async: false
  }).responseText;
  
  var target = $('[id^=inc_]');
 
  
  jQuery.each(target, function() {
    var include = $(this).attr('id');
    var reg = new RegExp('<\!--'+include+'-->([\n\r]|.)*<\!--\/'+include+'-->');
    var html = tmp.match(reg);
   
    $(this).html(html[0]);
	
  });
});

<!--inc_contents1-->
<div class="contact_block">
インクルードする内容を挿入
</div>
<!--/inc_contents1-->

<!--inc_contents2-->
<div class="contact_block">
1つの内容に複数のコンテンツも挿入可
</div>
<!--/inc_contents2-->