Question

我是JavaScript和正则表达式的新手。我有一个简单的任务来替换一系列＆lt;％whatever％＆gt;进入（无论如何）网页内。不知何故，regExp仅在某些条件下有效。

我不确定我是否有错误的表达式或我尝试访问document.body.HTML错误的方式。请注意代码中的“工作”和“不工作”备注。

<html>
<head>
  <script>
  </script>
</head>
<body>
  Hello, my items are <%abc%>, <%efg%>, <%hik%><p/>
  <p/>
</body>
<script>
var Transform = function() {
    var regExp = /<%\^?\w+?\.?\w+?%>/gi;
    document.body.innerHTML = document.body.innerHTML.replace(/Hello/g,"Hi"); //works
    document.body.innerHTML = document.body.innerHTML.replace(/my/g,"your"); //works
    document.body.innerHTML = document.body.innerHTML.replace(/\<%/g,"("); //not working
    document.body.innerHTML = document.body.innerHTML.replace(/%\>/g,")"); //not working
    return;
}
teststr="<%abc%>";
teststr=teststr.replace(/\<%/g,"(");
teststr=teststr.replace(/%\>/g,")"); //works show as (abc)
console.log(teststr)
Transform();
</script>
</html>

Answer 1

代码存在许多问题：

In [420]: %timeit [get_values(DF_All,ZZ[2],ZZ[3]) for ZZ in Array_On] 1 loops, best of 3: 1.39 s per loop In [421]: %timeit get_values_vectorized(DF_All, Array_On) 100 loops, best of 3: 18 ms per loop（以及其他）转换为文本，因为它们是非法的HTML标记。因此，当您查看<%abc%>时，您会看到document.body.innerHTML之类的内容。您可以使用<%abc%> .innerText插入来解决此问题，具体取决于您需要执行的具体操作。
打开.innerHTML标记后的任何内容都会被推入正文标记中。所以你的脚本也是<body>的一部分。要解决此问题，您可以在.innerHTML中添加脚本并设置<head>以在设置正文后运行代码。或者，您可以将内容放在正文中的window.onload内，并对其进行替换。
您将获得<div> 4次，这可能会导致以后出现问题。您可以改为对同一个字符串进行操作并设置.innerHTML一次。

.innerHTML

如果某些内容不起作用，请从最靠近不工作部分的点开始，然后向后退一步。将内容记录到控制台（<html> <head> <script> console.clear() var Transform = function() { var regExp = /<%\^?\w+?\.?\w+?%>/gi; document.body.innerHTML = document.body.innerHTML .replace(/Hello/g,"Hi") //works .replace(/my/g,"your") //works .replace(/<%/g,"(") //now working!! .replace(/%>/g,")"); //now working!! return; } window.onload = Transform; </script> </head> <body> Hello, my items are <%abc%>, <%efg%>, <%hik%><p/> <p/> </body> </html>）以确保值符合您的预期。确保您的代码以正确的顺序运行，在之后记录记录值 - 就像那样。

Answer 2

这是因为当我们谈论innerHTML时，浏览器会解释＆lt; as＆amp; lt;和＆gt; as＆amp; gt;

所以你需要修改你的正则表达式，如下面的演示。

var teststr = document.body.innerHTML;
teststr = teststr.replace(/&lt;%/g,"(");
teststr = teststr.replace(/%&gt;/g,")");
console.log(teststr);

<body>
  Hello, my items are <%abc%>, <%efg%>, <%hik%>
</body>

重要：获取正文的innerHTML还将包含您的脚本（如果您已注意到脚本正在控制台中打印）。更好的是你应该避免这种情况，改为使用querySelectors或将脚本放在<head>部分。

Answer 3

我认为这就是你想要的

const data = `<p></p><% <b>here is some text</b> %>
  <% you probably want to do something more %>
  <% x = 2 * 2 ?%>` // inner html

const parse = (data) => data.replace(/<(?:%|&lt;)((?:\n|.)*?)(?:%|&gt;)>/g, data => {
  // calc value to replace here
  return data
})

// here is just replacement
const parse2 = (data) => data.replace(/<(?:%|&lt;)((?:\n|.)*?)(?:%|&gt;)>/g, '$1')

console.log(parse2(data))

如何在JavaScript中调试正则表达式？

3 个答案: