Javascript str.replace с HTML строкой

Question

EDIT:

для того, чтобы быть более исчерпывающим:

Я динамическая страница порожден рендерингом внешней стороны сервера (решение ERP обработкой e- коммерция тоже, плохая история ...), которые добавляют свою часть кода, например, кнопки, форму ввода и т. д. Я не могу напрямую контролировать их, но мне нужно их стилизовать. Так что я использую функцию замены строки js, потому что я не могу использовать php, просто html/js. Но я не знаю js, я просто изучаю его, и в этом случае у меня не было вещей, работающих из-за отсутствия знаний о синтаксисе/экранировании.

function загружен onload="function()" в корпус.

Я только добавил <div id="replace-input"> вне частей кода, необходимого для замены (в данном случае это форма ввода для Qty предметов, подлежащих отослано в корзину)

благодаря

END EDIT

Я не могу найти рабочее решение для замены HTML-строку, как

<input name="qty" id="qty" size="6" maxlength="6" value="1" class="input"> 

в другой, как

<div class="product-qty"> 
<label for="qty">Qty:</label> 
<div class="custom-qty"> 
<button type="button" class="reduced items" onclick="var result = document.getElementById('qty'); var qty = result.value; if (!isNaN(qty) &amp;&amp; qty > 1)result.value--; return false;"> <i class="fa fa-minus-square-o"></i> </button> 
<input type="text" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty"> 
<button type="button" class="increase items" onclick="var result = document.getElementById('qty'); var qty = result.value; if (!isNaN(qty)) result.value++;return false;"> <i class="fa fa-plus-square-o"></i> </button> 
</div> 
</div> 

Я использую эту функцию

var str = document.getElementById("replace-input").innerHTML; 
    var res = str.replace(/HereIHaveToAddTheFirstString/g, "HereTheSecondOne"); 
    document.getElementById("replace-input").innerHTML = res; 

, но я не знаю, как писать строки для того, чтобы быть разобран правильно.

Answer 1

Если вы ищете способ использования кода HTML в виде строк, вы можете использовать онлайн tool, чтобы избежать символов для вас. После этого вы должны использовать DOM-манипуляцию, чтобы заменить два элемента. Если JQuery это не вариант, вы можете сделать что-то вроде

var div = document.createElement('div'); 

div.className = 'product-qty'; 

div.innerHTML = "<label for=\"qty\">Qty:<\/label>" 
+ "<div class=\"custom-qty\">" 
+ "<button type=\"button\" class=\"reduced items\" onclick=\"var result = document.getElementById('qty'); var qty = result.value; if (!isNaN(qty) &amp;&amp; qty > 1)result.value--; return false;\"> <i class=\"fa fa-minus-square-o\"><\/i> <\/button> " 
+ "<input type=\"text\" name=\"qty\" id=\"qty\" maxlength=\"12\" value=\"1\" title=\"Qty\" class=\"input-text qty\"> " 
+ "<button type=\"button\" class=\"increase items\" onclick=\"var result = document.getElementById('qty'); var qty = result.value; if (!isNaN(qty)) result.value++;return false;\"> <i class=\"fa fa-plus-square-o\"><\/i> <\/button>" 
+ "<\/div>"; 

var container = document.getElementById("replace-input"); 
var element = document.getElementById("qty"); 

container.removeChild(element); 
container.appendChild(div)