【问题标题】:Javascript str.replace with html string [closed]用 html 字符串替换 Javascript str.replace [关闭]
【发布时间】:2016-04-26 15:36:27
【问题描述】:

编辑:

为了更详尽:

我有一个由外部服务器端渲染引擎(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) &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;

但我不知道如何编写字符串以便正确解析。

【问题讨论】:

  • 为什么不使用 DOM 方法来操作元素和/或其属性,而不是尝试进行字符串操作?此外,您不应该使用这样的内联 js,它最终会让您难以管理
  • 感谢您的评论。我想更改(替换)由生成页面的框架的外部渲染引擎动态生成的元素。
  • 您的函数引用了.getElementById("replace-input"),但我在您的 DOM 中没有看到这样的元素。目前还不清楚您到底想用什么替换什么。
  • 据我了解,OP 希望将 HTML 代码块作为字符串传递给 JS 变量。我认为这只是知道如何逃避特殊字符的问题。我
  • 是的。我没有其他选择,因为我可以在服务器端第三方引擎生成 DOM 的某些元素后对其进行操作。

标签: javascript regex string replace str-replace


【解决方案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)

【讨论】:

  • 它有效。非常感谢:)
  • 在上一次编辑中解释得更好
猜你喜欢
  • 2020-01-09
  • 2020-06-07
  • 1970-01-01
  • 2022-11-14
  • 1970-01-01
  • 2021-06-16
  • 2013-03-08
  • 2014-04-17
  • 2019-05-29
相关资源
最近更新 更多