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

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

來源

2016-01-20 G.Dauria

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

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

你的函數引用了'.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)

來源

2016-01-20 17:11:05

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

emm ...等等...什麼？ – rpax

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

的Javascript str.replace與HTML字符串

回答

相關問題