JavaScript 中的 ReplaceAll() 未能在 HTML 页面中找到 </em>

Bao*_*Bao 1 html javascript frontend

我不熟悉 JavaScript 和 html。但我尝试使用 JavaScript 实现一个函数。

\n

我想替换html 页面中的所有<em>and 。</em>所以我在页面中插入一段javascript代码:

\n

\r\n
\r\n
function rep() \n{\n    document.body.innerHTML\n        = document.body.innerHTML\n        .replaceAll("<em>", "_");\n    document.body.innerHTML\n        = document.body.innerHTML\n        .replaceAll("</em>", "_");\n\n}\nwindow.onload=rep()
Run Code Online (Sandbox Code Playgroud)\r\n
<!DOCTYPE html>\n<html lang="en">\n<!-- ... -->\n<article>\n    <div class="container">\n        <div class="row">\n            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 post-container">\n\n                <p>(Weierstrass) \xe8\xae\xbe $z_{0}$ \xe6\x98\xaf $f$ \xe7\x9a\x84\xe6\x9c\xac\xe6\x80\xa7\xe5\xa5\x87\xe7\x82\xb9,\xe9\x82\xa3\xe4\xb9\x88\xe5\xaf\xb9\xe4\xbb\xbb\xe6\x84\x8f $A \\in \\mathbb{C}<em>{\\infty}$, \xe5\xbf\x85\xe5\xad\x98\xe5\x9c\xa8\xe8\xb6\x8b\xe4\xba\x8e $z</em>{0}$ \xe7\x9a\x84\xe7\x82\xb9\xe5\x88\x97 $\\left{z_{n}\\right}$, \xe4\xbd\xbf\xe5\xbe\x97 $\\lim <em>{n \\rightarrow \\infty} f\\left(z</em>{n}\\right)=A$.</p>\n\n            </div>\n        </div>\n    </div>\n<!-- ... -->\n\n</html>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

成功替换<em>成了“_”,但是一切都</em>没有改变。代码有什么问题吗?\n谢谢!

\n

Kon*_*owy 7

让我们看看当浏览器看到无效的 html 时会发生什么,例如:

test</em>
Run Code Online (Sandbox Code Playgroud)

上面的打印test(和脚本)

这是因为浏览器在解析时会去掉无效的结构

当你这样做时

document.body.innerHTML
  = document.body.innerHTML
  .replaceAll("<em>", "_");
Run Code Online (Sandbox Code Playgroud)

<em>正确替换了所有标签,但关闭标签被删除

另一方面,这将起作用:

test</em>
Run Code Online (Sandbox Code Playgroud)
document.body.innerHTML
  = document.body.innerHTML
  .replaceAll("<em>", "_");
Run Code Online (Sandbox Code Playgroud)


And*_*ndy 5

为此,最好使用可用的 DOM 方法。

\n
    \n
  1. 拾取所有em带有 的元素querySelectorAll

    \n
  2. \n
  3. 为每个元素创建一个文本节点。用下划线将元素的原始文本内容添加到末尾,并将其添加到文本节点。用于replaceWithem元素替换为文本节点。

    \n
  4. \n
\n

\r\n
\r\n
const ems = document.querySelectorAll(\'em\');\n\nems.forEach(em => {\n  const text = `_${em.textContent}_`;\n  const node = document.createTextNode(text);\n  em.replaceWith(node);\n});
Run Code Online (Sandbox Code Playgroud)\r\n
<p>(Weierstrass) \xe8\xae\xbe $z_{0}$ \xe6\x98\xaf $f$ \xe7\x9a\x84\xe6\x9c\xac\xe6\x80\xa7\xe5\xa5\x87\xe7\x82\xb9,\xe9\x82\xa3\xe4\xb9\x88\xe5\xaf\xb9\xe4\xbb\xbb\xe6\x84\x8f $A \\in \\mathbb{C}<em>{\\infty}$, \xe5\xbf\x85\xe5\xad\x98\xe5\x9c\xa8\xe8\xb6\x8b\xe4\xba\x8e $z</em>{0}$ \xe7\x9a\x84\xe7\x82\xb9\xe5\x88\x97 $\\left{z_{n}\\right}$, \xe4\xbd\xbf\xe5\xbe\x97 $\\lim <em>{n \\rightarrow \\infty} f\\left(z</em>{n}\\right)=A$.</p>\n\n<ul>\n  <li><em>This is some italised text</em></li>\n  <li>And this is not.</li>\n  <li><em>But this is</em>.</li>\n</ul>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

附加文档

\n\n