Форум

Stenli · #1 (**permalink**) 28.08.2017, 07:37

Есть код:

$('*', 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. Либо изначально селектор по-другому настроить, либо вывод настроить надо.

Спасибо за подсказку.

ksa · #2 (**permalink**) 28.08.2017, 08:43

Сообщение от Stenli

Понимаю, что проблема в переменной bg

Так ты потестируй по шагам и посмотришь, что именно у тебя происходит.

Stenli · #3 (**permalink**) 28.08.2017, 09:59

Ставил алерты - все попадает куда надо, а вот положить не могу в то же место, откуда взял.

j0hnik · #4 (**permalink**) 28.08.2017, 10:22

Сообщение от Stenli

Ставил алерты - все попадает куда надо, а вот положить не могу в то же место, откуда взял.

макет или ссылку бы неплохо

Stenli · #5 (**permalink**) 28.08.2017, 10:40

Что значит макет?
Чтобы не тянуть, приложил на всяк случай 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>

ksa · #6 (**permalink**) 28.08.2017, 10:46

Сообщение от Stenli

Что значит макет?

Это маленький тестовый пример на котором можно было бы посмотреть проблему.

Сообщение от Stenli

приложил на всяк случай HTML и полный JS

Это не получится запустить. Пример должен быть чем проще - тем лучше.

Stenli · #7 (**permalink**) 28.08.2017, 13:46

Спасибо за разъяснение на счет макета.

В один 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)

ksa · #8 (**permalink**) 28.08.2017, 13:58

Сообщение от Stenli

Можно попробовать с такими вводными:

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

Не совсем понятна проблема...

Нужно строчку

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

?

Stenli · #9 (**permalink**) 28.08.2017, 14:48

Да, верно

ksa · #10 (**permalink**) 28.08.2017, 15:15

Дык!

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

Форум

Справочник

Discord чат

Курсы javascript