Что значит макет?
Чтобы не тянуть, приложил на всяк случай HTML и полный JS
$(document).ready(function() {
var Final = '';
$('#sendTo').on('click', function () {
//var insertData = $('#insertArea').val();
var bodyVal = $('#insertArea').val();
bodyVal = bodyVal.substring(bodyVal.indexOf('<body>')+6, bodyVal.lastIndexOf('</body>')).trim();
var div = $("<div>", {html : bodyVal});
// find and replace all href links
$('a', div).attr("href","{{ $test }}");
// find and replace all img
$('img', div).each(function (i,el) {
var srcVal=el.src.substr(el.src.lastIndexOf("/")+1,el.src.length);
$(this).attr("src","{{ asset('layers/'. $template_folder .'/img/" + srcVal + "') }}");
});
// find and replace all URL in styles
$('*', div).each(function (i,el) {
var bg = $(this).css('background').replace('url(','').replace(')','').replace(/\"/gi, "");
var srcValUrl= bg.substr(bg.lastIndexOf("/")+1,bg.length);
$(this).css("background","{{ asset('layers/'. $template_folder .'/img/' "+ srcValUrl +" ') }}");
});
// delete tag script, iframe, noscript with content
$('script', div).empty();
$('noscript', div).empty();
$('iframe', div).empty();
$('script', div).remove();
$('noscript', div).remove();
$('iframe', div).remove();
Final += "@include('layers.header')\n<body>\n" + div.html().trim() + "\n@include('layers.footer')";
$('#pastArea').val(Final);
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<script type="text/javascript" src="assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/preland.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4" style="padding: 10px; font-size: 12px; background-color: cornflowerblue; color: #fff; height: 100%;">
<div class="col-lg-8">
<label>Введите html-текст, который нужно адаптировать (правая кнопка мыши + вставить или Ctrl+V)</label>
<textarea class="form-control" name="insertArea" id="insertArea" cols="80" rows="15"></textarea>
</div>
<div class="text-center" >
<button style="margin-top: 10px;" type="button" name="sendTo" value="Send to" id="sendTo" class="btn btn-success">Адаптировать</button>
</div>
<div class="col-lg-8" style="margin-top: 10px;">
<label>Скопируйте/вырежьте адаптированный html-текст (правая кнопка мыши + копировать или Ctrl+C/X)</label>
<textarea class="form-control" name="pastArea" id="pastArea" cols="80" rows="15"></textarea>
</div>
<br>
<!--<form>
<div class="text-center">
<input style="margin-top: 10px;" type="text" name="domainConvert" id="domenConvert"/>
</div>
<div class="text-center">
<input style="margin-top: 10px;" type="text" name="domainConvert" id="domenGet"/>
</div>
<br>
</form>-->
</div>
</div>
</body>
</html>