Как изменить путь в style="background:url('XXX');"
Есть код:
$('*', 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 +" ') }}");
});
На выходе изменения не появляются - путь не меняется. Понимаю, что проблема в переменной bg и если бы без нее, то нормально бы было, как под спойлером.
$('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 + "') }}");
});
Но под спойлером селектор выбирает тег, который имеет уже путь, а в случае с аттрибутом сложнее немного. Сообразить не могу на jQuery. Либо изначально селектор по-другому настроить, либо вывод настроить надо. Спасибо за подсказку. |
Цитата:
|
Ставил алерты - все попадает куда надо, а вот положить не могу в то же место, откуда взял.
|
Цитата:
|
Что значит макет?
Чтобы не тянуть, приложил на всяк случай 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>
|
Цитата:
Цитата:
|
Спасибо за разъяснение на счет макета.
В один HTML поместил. Под спойлером. Два поля: в верхнее вставляет некоторый код, после нажатия кнопки, в нижнем появляется результат после обработки.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div>
<label>Поле, откуда скрипт берет данные для обработки</label>
<textarea class="form-control" name="insertArea" id="insertArea" cols="80" rows="15"></textarea>
</div>
<div class="text-center" >
<button type="button" name="sendTo" value="Send to" id="sendTo" class="btn btn-success">Кнопка</button>
</div>
<div>
<label>Поле, куда скрипт кладет обработанные данные</label>
<textarea name="pastArea" id="pastArea" cols="80" rows="15"></textarea>
</div>
<br>
</div>
</div>
<script>
var Final = '';
$('#sendTo').on('click', function () {
var bodyVal = $('#insertArea').val();
var div = $("<div>", {html : bodyVal});
$('*', 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 +" ') }}");
});
Final += div.html().trim();
$('#pastArea').val(Final);
});
</script>
</body>
</html>
Можно попробовать с такими вводными:
<span style="background: url('https://yastatic.net/morda-logo/i/citylogos/yandex_no1-logo-ru.png');"></span>
На выходе ожидаю:
<span style="background: url('{{ asset('layers/'. $template_folder .'/img/' yandex_no1-logo-ru.png') }}');"></span>
Подозреваю, что нужно примерно в этом русле думать на 31-й стр: $('*', div).css('background').each(function (i,el) |
Цитата:
Нужно строчку
"background: url('https://yastatic.net/morda-logo/i/citylogos/yandex_no1-logo-ru.png');"
Заменить на строку
"background: url('{{ asset('layers/'. $template_folder .'/img/' yandex_no1-logo-ru.png') }}');"
? :blink: |
Да, верно
|
Дык!
<span style="background: url('https://yastatic.net/morda-logo/i/citylogos/yandex_no1-logo-ru.png');"></span>
<script type='text/javascript'>
var o=document.getElementsByTagName('span')[0];
val="background: url('{{ asset('layers/'. $template_folder .'/img/' yandex_no1-logo-ru.png') }}');";
o.setAttribute('style',val);
</script>
Вот в консоли получается
<span style="background: url('{{ asset('layers/'. $template_folder .'/img/' yandex_no1-logo-ru.png') }}');"></span>
|
| Часовой пояс GMT +3, время: 13:32. |