2016-01-20 75 views
1

編輯:的Javascript str.replace與HTML字符串

爲了更詳盡:

我已經由一個外部服務器端渲染引擎生成動態頁面(ERP解決方案處理E-電子商務也是如此,壞故事......),它添加了自己的部分代碼,如按鈕,輸入表單等。 我無法直接控制它們,但我需要對它們進行樣式設計。 所以我使用js的字符串替換函數,因爲我不能使用php,只是html/js。但我不知道js,我只是在學習它,在這種情況下,由於缺乏有關語法/轉義的知識,我沒有工作。

function在身體內裝有onload="function()"

我剛加入所需的代碼的部分之外的<div id="replace-input">要被替換(在這種情況下是用於項目的數量的輸入形式來sended到購物車)

感謝

編輯完

我無法找到一個可行的解決方案,以取代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; 

,但我不知道怎麼寫字符串才能被正確解析。

+0

爲什麼不使用DOM方法來操作元素和/或它們的屬性,而不是嘗試執行字符串操作?此外,你不應該使用內聯js,它會最終難以管理 –

+0

感謝您的評論。我想更改(替換)由生成頁面的框架的外部呈現引擎動態生成的元素。 –

+0

你的函數引用了'.getElementById(「replace-input」)'但我在你的DOM中沒有看到這樣的元素。目前還不清楚你到底想要用什麼替代。 – jjmontes

回答

-2

如果您正在尋找一種將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) 
+0

它的工作原理。非常感謝:) –

+0

emm ...等等...什麼? – rpax

+0

在上次編輯中解釋得更好 –