Javascript str.replace 和 html 字符串
Javascript str.replace with html string
编辑:
为了更详尽:
我有一个由外部服务器端呈现引擎生成的动态页面(ERP 解决方案也处理电子商务,糟糕的故事...)添加了自己的代码部分,如按钮、输入表单等等
我不能直接控制它们,但我需要设计它们的样式。
所以我使用了js的字符串替换功能,因为我不能使用php,只能使用html/js。但是我不知道 js,我只是在学习它,在这种情况下,由于缺乏语法/转义方面的知识,我还没有工作。
正文function
加载onload="function ()"
我刚刚在需要替换的代码部分之外添加了一个 <div id="replace-input">
(在本例中是要发送到购物车的商品数量的输入表单)
谢谢
结束编辑
我找不到可行的解决方案来替换 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) && 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;
但我不知道如何编写字符串才能正确解析。
如果您正在寻找将 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) && 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)
编辑:
为了更详尽:
我有一个由外部服务器端呈现引擎生成的动态页面(ERP 解决方案也处理电子商务,糟糕的故事...)添加了自己的代码部分,如按钮、输入表单等等 我不能直接控制它们,但我需要设计它们的样式。 所以我使用了js的字符串替换功能,因为我不能使用php,只能使用html/js。但是我不知道 js,我只是在学习它,在这种情况下,由于缺乏语法/转义方面的知识,我还没有工作。
正文function
加载onload="function ()"
我刚刚在需要替换的代码部分之外添加了一个 <div id="replace-input">
(在本例中是要发送到购物车的商品数量的输入表单)
谢谢
结束编辑
我找不到可行的解决方案来替换 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) && 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;
但我不知道如何编写字符串才能正确解析。
如果您正在寻找将 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) && 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)