Форум

arahmanov · #1 (**permalink**) 27.08.2015, 22:12

есть Переменная

var div_1 = $("#textarea").val(); // в нее приходит код html среди которого несколько тегов

<img scr="A.tip" alt="B" width="C" height="D" border="F"/>
<img scr="A2.tip" alt="B2" width="C2height="D2 border="F2"/>

необходимо заменить их на

<div style="background:url(A.tip) no-repaet; width:C px; height

px; margin:F auto;>

<div style="background:url(A2.tip) no-repaet; width:C2 px; height

2 px; margin:F2 auto;></div>

Подскажите пожалуйста в каком направлении двигаться ?

рони · #2 (**permalink**) 27.08.2015, 22:42

arahmanov,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  $(function() {
    var a = $("#textarea").val(),
        a = $("<div>", {
            html: a
        });
    a.find("img").each(function(a, b) {
        var c = $("<div>", {
            css: {
                background: "url(" + b.getAttribute("src") + ") no-repeat",
                width: b.width + "px",
                height: b.height + "px",
                margin: b.border + "px auto"
            }
        });
        $(b).replaceWith(c)
    });
    $("#textarea").val(a.html())
});


  </script>
</head>

<body>

<textarea id="textarea" name="" rows="8" cols="70">
<img src="A.tip" alt="B" width="100" height="200" border="2"/>
<img src="A2.tip" alt="B2" width="123" height="345" border="4"/>
</textarea>

</body>

</html>

arahmanov · #3 (**permalink**) 27.08.2015, 23:27

Спасибо РОНИ

)))

arahmanov · #4 (**permalink**) 29.08.2015, 06:46

Продолжение следует......

Задача моя была сделать кнопку для joomla редактора которая автоматом бы меняла бы

<img scr="A.tip" alt="B" width="C" height="D" border="F"/>

на

<div style="background:url(A.tip) no-repaet; width:C px; height D px; margin:F auto;>

но учитывая непонятную мне специфику работы joomla вариант РОНИ просто отказывается работать Поэтому я пошел еще более простым путем

$jsCode = "
            function insertCustText(editor) {

                
                
                
                
                var a = document.getElementById('jform_articletext').value; // Получаем Html код из редактора
                
               var res = a.replace(/img/g,\"div\") // Заменяем все img на div
                res = res.replace(/scr=/g, \"style='background:url(\"); // заменяем scr на style
                res = res.replace(/alt/g, \") no-repeat; name\"); // чтобы сохранить тег alt для обратный замены меняем его на name
                res = res = res.replace(/width/g,\"; width\") //
                res = res = res.replace(/height/g,\"; height\") //
                res = res = res.replace(/border=\"/g,\"; margin:\") //
            

                                        
                                        
                                                              
                                       
             document.getElementById('jform_articletext').value = res;
                
                
                                        
            }
            ";

и результат вот такой
<div style='background:url("A.tip" ) no-repeat; name="B" ; width="C" ; height="D" ; margin:F"/>

помогите разобраться осталось как то удалить name="" и убрать кавычку <"> но как бы я не пробовал кавычка не убирается из-за экранирования в php а как удалить значение name вообще ума не приложу!

Спасибо!

рони · #5 (**permalink**) 29.08.2015, 09:27

arahmanov,
вариант заменить в коде все $ на jQuery

Форум

Справочник

Discord чат

Курсы javascript