我不熟悉JavaScript和html。但是我尝试使用JavaScript实现一个函数。
我想替换所有的<em>和</em>在一个html页面。所以我在页面中插入了一段javascript代码:
function rep()
{
document.body.innerHTML
= document.body.innerHTML
.replaceAll("<em>", "_");
document.body.innerHTML
= document.body.innerHTML
.replaceAll("</em>", "_");
}
window.onload=rep()<!DOCTYPE html>
<html lang="en">
<!-- ... -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 post-container">
<p>(Weierstrass) 设 $z_{0}$ 是 $f$ 的本性奇点,那么对任意 $A in mathbb{C}<em>{infty}$, 必存在趋于 $z</em>{0}$ 的点列 $left{z_{n}right}$, 使得 $lim <em>{n rightarrow infty} fleft(z</em>{n}right)=A$.</p>
</div>
</div>
</div>
<!-- ... -->
</html>用"_"代替<em>成功，但所有</em>都没有改变。代码有什么问题?谢谢你！
让我们看看当浏览器看到像
这样的无效html时会发生什么:test</em>
console.log(document.body.innerHTML)test</em>上面打印test(和脚本)
这是因为浏览器在解析
时剥离了无效的结构当你这样做
document.body.innerHTML
= document.body.innerHTML
.replaceAll("<em>", "_");
正确替换所有<em>标签，但关闭标签被删除
另一方面也可以:
document.body.innerHTML = document.body.innerHTML
.replaceAll("<em>", "_")
.replaceAll("</em>", "_");<em>test</em>最好使用可用的DOM方法。
-
用
querySelectorAll拾取所有em元素 -
为每个元素创建一个文本节点。用下划线结束元素的原始文本内容，并将其添加到文本节点。使用
replaceWith将em元素替换为文本节点。
const ems = document.querySelectorAll('em');
ems.forEach(em => {
const text = `_${em.textContent}_`;
const node = document.createTextNode(text);
em.replaceWith(node);
});<p>(Weierstrass) 设 $z_{0}$ 是 $f$ 的本性奇点,那么对任意 $A in mathbb{C}<em>{infty}$, 必存在趋于 $z</em>{0}$ 的点列 $left{z_{n}right}$, 使得 $lim <em>{n rightarrow infty} fleft(z</em>{n}right)=A$.</p>
<ul>
<li><em>This is some italised text</em></li>
<li>And this is not.</li>
<li><em>But this is</em>.</li>
</ul>附加文档
-
querySelectorAll -
replaceWith
-
forEach - 模板/字符串文字
用正则表达式或字符串函数处理html是一个坏主意(html不是字符串)，但如果你必须这样做，它应该这样做:
let html = document.body.innerHTML
html = html.replace(...)
html = html.replace(...) etc
document.body.innerHTML = html
也就是说，不要使用部分处理过的字符串来设置innerHTML。
简单但效率不高:
document.body.innerHTML.replace(/<em>|</em>/gm, '_');
结果:
//body before: <em>test</em>
//body after: _test_
regex将遍历整个body，并将所有出现的<em>或</em>替换为_
regex选项g用于全局，m用于多行，允许覆盖整个body和多次出现。