JavaScript中的replaceAll()无法< /em>在HTML页面中找到

ttcibm8c  于 2023-01-04  发布在  Java
关注(0)|答案(4)|浏览(147)

我不熟悉JavaScript和HTML。但我尝试使用JavaScript实现一个函数。
我想替换html页面中所有的<em></em>,所以我在页面中插入了一段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} f\left(z</em>{n}\right)=A$.</p>

            </div>
        </div>
    </div>
<!-- ... -->

</html>

成功地将<em>替换为"_",但是所有的</em>都没有改变。代码有什么问题吗?谢谢!

j0pj023g

j0pj023g1#

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

test</em>

x一个一个一个一个x一个一个二个x
上面的代码打印test(和脚本)
这是因为浏览器在解析时会去除无效的结构
当你这样做

document.body.innerHTML
  = document.body.innerHTML
  .replaceAll("<em>", "_");

正确替换了所有<em>标记,但删除了结束标记
这将在另一方面起作用:

document.body.innerHTML = document.body.innerHTML
  .replaceAll("<em>", "_")
  .replaceAll("</em>", "_");
<em>test</em>
kognpnkq

kognpnkq2#

为此,使用可用的DOM方法可能更好。
1.用querySelectorAll拾取所有em元素。
1.为每个元素创建一个文本节点。用下划线将元素的原始文本内容添加到文本节点中。使用replaceWithem元素替换为文本节点。

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} f\left(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>

其他文件

t5zmwmid

t5zmwmid3#

用正则表达式或字符串函数处理HTML是个坏主意(HTML不是字符串),但如果一定要这样做,应该这样做:

let html = document.body.innerHTML
    html = html.replace(...)
    html = html.replace(...) etc
    document.body.innerHTML = html

换句话说,不要使用部分处理的字符串来设置innerHTML

4uqofj5v

4uqofj5v4#

更简单但效率不高:

document.body.innerHTML.replace(/\<em\>|\<\/em\>/gm, '_');

结果:

//body before: <em>test</em>
//body after: _test_

正则表达式将遍历整个正文,并将所有<em></em>替换为_
正则表达式选项g用于全局,m用于多行,允许覆盖整个正文和多次出现。

相关问题