2016-01-20 45 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

在上次编辑中解释得更好 –