首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我用<span>标记替换字符串时,MutationObserver创建无限循环

当你使用<span>标记替换字符串时,MutationObserver创建无限循环的原因是因为MutationObserver会监听DOM的变化,并在每次变化发生时触发回调函数。当你使用<span>标记替换字符串时,会导致DOM的结构发生变化,从而触发MutationObserver的回调函数。而在回调函数中又对DOM进行了修改,进而再次触发MutationObserver的回调函数,从而形成了无限循环。

为了解决这个问题,你可以在回调函数中添加一个判断条件,当满足某个条件时,停止对DOM的修改,从而避免无限循环。例如,你可以在回调函数中判断是否已经替换了所有的<span>标记,如果是,则停止对DOM的修改。

另外,你还可以使用其他方法来替换字符串,而不是直接操作DOM。例如,你可以使用正则表达式来替换字符串,或者使用字符串的replace方法进行替换。这样可以避免对DOM进行频繁的修改,从而减少MutationObserver的触发次数。

总结起来,当你使用<span>标记替换字符串时,要注意MutationObserver可能会创建无限循环的问题。你可以通过添加判断条件或使用其他方法来替换字符串来解决这个问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript 高级程序设计(第 4 版)- DOM

任何时候要迭代 NodeList,最好再初始化一个变量保存当时查询时的长度,然后用循环变量与这个变量进行比较 最好限制操作 NodeList 的次数。...记录队列 每次 MutationRecord 被添加到 MutationObserver 的记录队列时,仅当之前没有已排期的微任务回调时(队列中微任务长度为 0),才会将观察者注册的回调(在初始化 MutationObserver...属性时,会返回元素所有后代的 HTML 字符串,包括元素、注释和文本节点。...outerHTML 属性 读取 outerHTML 属性时,会返回调用它的元素(及所有后代元素)的 HTML 字符串。...在写入outerHTML 属性时,调用它的元素会被传入的 HTML 字符串经解释之后生成的 DOM 子树取代。

1.2K30
  • 如何在页面中监听“不存在”的 DOM 节点

    前言事情是这样的,某天我想给文档网站加个访问量统计的插件,这个插件是第三方的,工作原理是将数据填充到页面中特定 id 的节点上,例如有一个 span id="pv">span> 的节点,插件加载完成后就会通过...如果你的网站是自己用例如 Vue 这样的框架编写的,那你自然会想到在 onMounted 生命周期里加载脚本,但在这个场景下页面真正渲染完成是在一个黑盒当中,那么我要如何才能获知这个本“不存在”的 DOM...有没有什么方法可以避免无意义的轮询,又能在渲染完成第一时间加载脚本呢?这就要提到 MutationObserver 这个浏览器 API 了。...当 MutationObserver 绑定到一个节点上时,它会创建一个观察器实例,该实例会监听其绑定的节点及其子节点的变化,并在发生变化时触发一个回调函数。...编辑器自动保存当我们给一个普通的 div 添加 contentEditable 属性时,它便具有了可编辑的能力,这时我们可以通过 MutationObserver 来监听文本内容的变动,并执行某些逻辑,

    1.3K40

    来一瓶 Web Component 魔法胶水

    框架怎么决定用 HTML Attribute 还是 Property 的呢? 那么在常见的视图框架中,在对接自定义元素时,是怎么决定用 HTML Attribute 还是 Property 的呢?...slot="header">Custom Headerspan> span slot="body">Custom Bodyspan> 浏览器在 DOM 渲染时...因此它只能简单满足一些 DOM 节点的替换。 先来看看主流的视图框架支不支持原生 Slot? Vue 2。...如果不是用 Shadow DOM, 还有一些手段来实现类似插槽的效果: 方法一,传入 HTML 字符串。这是最简单、最普适的方案了。至于事件,可以通过冒泡委托。...当我们需要封装一个 Web Component 时需要处理以下事情: 如何将自定义元素的 Attribute 和 Property 映射到组件 Props。

    58820

    Vue.js框架中权衡的艺术

    一般我们插入大量新HTML标记时,使用innerHTML 与 通过多次DOM操作先创建节点再指定它们之间的关系相比,效率更高,因为在设置innerHTML 时就会先创建一个HTML解析器,这个解析是在浏览器级别的基础上代码...当新建页面时 const html = ` span>......span> ` div.innerHTML = html 通过 innerHtml 创建页面的性能 = HTML字符串拼接的计算量 + innerHTML的DOM计算量 通过 虚拟dom...创建页面的性能 = 创建虚拟dom的计算量 + 创建真实DOM的计算量 innerHTML 虚拟DOM JavaScript运算 拼接html字符串 创建虚拟dom DOM构建 新建所有dom元素...拼接html字符串 创建虚拟dom + diff算法 DOM构建性能因素 销毁旧dom新建新dom与模版大小相关 必要的dom更新与数据变化量相关 更新dom 时,虚拟DOM性能更加优越 修改

    1.7K20

    Springboot(三)——Thymeleaf模板

    2.在html标签中增加了额外得属性来达到模版+数据得展示方式,在浏览器解析html页面时,会自动忽略html标签中未定义得属性,达到可以显示静态页面效果;当有数据返回时,thymeleaf标签会动态得替换掉静态内容...二、Thymeleaf使用 2.1 创建springboot项目 2.2 在pom.xml中引入需要得依赖关系 标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。...th:attr 设置标签属性,多个属性可以用逗号分隔 比如th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。...a':'b'">测试span> 六、常用标签得使用 1.赋值和字符串操作 span th:text="123text">测试span> span th:text

    37710

    响应式、模版克隆、Proxy 代理。。。JavaScript 框架工作原理你还了解多少?

    当我阅读大型框架领域的最新动态时,我常常会被自己不知道的事情压得喘不过气来。 不过,了解某些东西如何工作的最好方法之一就是自己动手创建。...当我们构建玩具示例时,我们也将使用标记模版字面量(Tagged Template Literals),简单来说它可以让我们用另一种方式进行函数调用,来创建这样的 API: const dom = html...在 effect 出错时使用try/catch 2. 避免重复运行同一 effect 3. 防止无限循环 4....当我们将该 state 传递给 render 时,它应该返回应用了该状态的 DOM 树: Blue!...: [ "Hello ", "" ] 只有当标记模板的位置完全不同时, tokens 才会不同: html`` html`span>span>`

    20210

    nextTick的原理及运行机制

    JS运行机制 JS执行是单线程的,它是基于事件循环的。事件循环大致分为以下几个部分: 所有同步任务在主线程上执行,形成一个执行栈。 主线程之外,还存在一个“任务队列”。只要异步有了运行结果。...[1](html5新特性,会在指定的DOM发生变化时被调用) Vue是异步更新DOM的 vue 是异步驱动视图更新的,即当我们在事件中修改数据时,视图并不会即时的更新, 而是在等同一事件循环的所有数据变化完成后...,再进行事件更新; vue文档中的介绍[2]: Vue 在更新 DOM 时是异步执行的,只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。...然后,在下一个的事件循环tick中, Vue 刷新队列并执行实际(已去重)的工作。...这也验证了上面提到的 Vue在更新DOM时是异步更新的。

    1.3K50

    vue高频面试题合集(四)附答案

    那么优化过程就是深度遍历AST树,按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对,对运行时的模板起到很大的优化作用。...mounted(挂载后):在el被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。...然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。beforeDestroy(销毁前):实例销毁之前调用。...用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 activated 钩子函数。...首先,对比节点本身,判断是否为同一节点,如果不为相同节点,则删除该节点重新创建节点进行替换如果为相同节点,进行patchVnode,判断如何对该节点的子节点进行处理,先判断一方有子节点一方没有子节点的情况

    72440

    springboot(四):thymeleaf使用详解

    浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。...(Literal tokens): one, sometext, main,… 文本操作(Text operations) 字符串连接(String concatenation): + 文本替换(Literal...2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。...几种常用的使用方法 1、赋值、字符串拼接 description span th:text="'Welcome to...> 字符串拼接还有另外一种简洁的写法 span th:text="|Welcome to our application, ${user.name}!

    3.4K100

    2 行代码,将 .NET 执行时间降低 87%!(附代码)

    在创建请求时,消费者可以提供一个可选的请求值,以指定特定索引。在这种情况下,必须在运行时构建URL,通过用户提供的索引名称替换URL中的{索引}部分。...必要时还可以使用带有标记的URL模式,利用调用者代码提供的路由值替换可选的标记,从而创建最终的URL字符串。...然后,遍历带有标记的URL中的每个字符串。URL路径中的标记元素存储在字符串数组字段“_tokenized”中。在每次迭代中,如果字符串值以“@”字符开头,则表明需要用相应的值替换它。...当所有带有标记的值都被添加并替换之后,就可以调用StringBuilder的ToString方法,返回最终的字符串。每次客户端发送请求时,这段代码都会被调用,因此是库中的热路径。...现在这段代码使用的是StringBuilder,这是良好的实践,在需要将补丁数量的字符串连接到一起时,可以避免字符串分配。有几种使用Span的方法可以减少字符串分配的次数。

    49041

    JavaScript——字符串对象

    索引号) str.charCodeAt(0) str[index] 获取指定位置字符串 HTML5,IE8+支持 charAt(index)span> span>根据位置返回字符串 var...; console.log(str.concat('Yue'));//zeyiYue 注:在开发中,我们更喜欢用 span> span>+span> span>来拼接字符串 截取字符串...//只会替换第一个匹配到的字符 如果想全部替换,可以使用循环 var str = '天生我财必有用,财源广进'; while (str.indexOf('财') !...简单类型传参 函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。...复制类型传承 函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。

    36110
    领券