Bao*_*Bao 1 html javascript frontend
我不熟悉 JavaScript 和 html。但我尝试使用 JavaScript 实现一个函数。
\n我想替换html 页面中的所有<em>and 。</em>所以我在页面中插入一段javascript代码:
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成功替换<em>成了“_”,但是一切都</em>没有改变。代码有什么问题吗?\n谢谢!
让我们看看当浏览器看到无效的 html 时会发生什么,例如:
test</em>
Run Code Online (Sandbox Code Playgroud)
test</em>
Run Code Online (Sandbox Code Playgroud)
console.log(document.body.innerHTML)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)
为此,最好使用可用的 DOM 方法。
\n拾取所有em带有 的元素querySelectorAll。
为每个元素创建一个文本节点。用下划线将元素的原始文本内容添加到末尾,并将其添加到文本节点。用于replaceWith将em元素替换为文本节点。
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附加文档
\n| 归档时间: |
|
| 查看次数: |
114 次 |
| 最近记录: |