Javascript 在页面上查找文本

2023-11-29

我需要在类似于以下内容的 HTML 上运行搜索和替换...我需要有“查找下一个”、“替换”和“全部替换”选项...诀窍是我需要运行 AJAX 请求替换值后,更新数据库中每个字段的值。

我遇到的唯一麻烦是我不确定如何搜索内容#sheet并将这些值替换为用户提供的新值。

<div id='sheet'>
<div class='item' id='field-18583'>This is yet another test</div>
<div class='item' id='field-18585'>This is test data</div>
</div>

我应该说,我可能有大量文本要搜索,所以理想情况下我只会找到正在搜索的项目的下一个实例,而不是所有实例。因此,当我点击“查找下一个”时,如果我有 3 个项目,它将转到第 4 个项目。

javascript 中维护索引的最佳方法是什么,而不将所有找到的结果存储在变量中并导致页面滞后?


我将在遍历匹配元素时构建一个数据对象。然后发送该对象,这样就不会出现循环中的多个 ajax 请求。jsfiddle:

<div class='item' id='field-18583'>This is yet another test</div>
<div class='item' id='field-18585'>This is test data</div>

Script:

var searchTerm = 'This is',
    replaceWith = 'This is new',
    updateObj = {};
$("#sheet div.item:contains('" + searchTerm + "')").each(function(){
   // use id to build an update object
    updateObj[this.id.replace('field-', '')] = {
        oldText: searchTerm, 
        newText: replaceWith
    }; // not sure what you are trying to save here
   // manipulate html
   this.innerHTML = this.innerHTML.replace(searchTerm, replaceWith);
});
// after, send ajax data `updateObj`
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript 在页面上查找文本 的相关文章

  • jquery如何获取右、左、上、下箭头键值

    我使用了下面的代码 每当单击箭头键 左 右 上 下 时 我得到的键值为 0 任何人都可以帮忙解决这个问题吗 document keypress function e alert key value e which 如何获取 上 下 右 左
  • 如何向 DOM 添加支持 Angular 的元素?

    我想以编程方式添加一些支持 Angular 的 DOM 元素 实际上 我可能需要添加自定义组件 我该怎么做 这是一个简单的小提琴来演示这个问题 http jsfiddle net ZJSz4 2 http jsfiddle net ZJSz
  • React Native 中的动画背景颜色

    我将如何在 React Native 中将一种颜色动画化为另一种颜色 我发现通过插入 Animated Value 您可以通过以下方式对颜色进行动画处理 var BLACK 0 var RED 1 var BLUE 2 background
  • 使用jquery,下拉列表选择更改时如何重定向?

    我有一个下拉列表 如果有人选择一个选项 我想根据选择重定向到另一个页面 我怎样才能通过 jquery 做到这一点 将逻辑绑定到 change 事件 并从中获取当前值 val 以确定用户应该被重定向到哪里 此示例假设位置直接存储在值本身中 m
  • JavaScript 事件循环:队列、消息队列、事件队列

    阅读了大量 JavaScript 事件循环教程 我看到了不同的术语来标识当调用堆栈为空时准备由事件循环获取的队列存储消息 Queue 消息队列 事件队列 我找不到规范术语来识别这一点 甚至 MDN 似乎也对此感到困惑事件循环页面 https
  • 在 Angular 2+ 中进行 DOM 操作的正确方法

    我知道有一些类似的问题 但没有人回答我的问题 基本上 以角度方式操作 DOM 的正确方法是什么 比如说我有这个 html
  • 如何将 props 传递给模态

    我有一个购物应用程序 我可以在其中映射一些产品并将它们呈现在屏幕上 用户可以增加 减少数量 当数量达到 1 并且用户点击减少时 一些中间件会介入并询问他们是否确定要将其从购物篮中删除 如果他们单击 否 则会关闭模式并将其留在购物篮中 如果他
  • 样式表何时添加到 document.styleSheets

    我正在尝试使用 javascript 动态添加 css 样式表规则 例如示例 2here https developer mozilla org en DOM CSSStyleSheet insertRule 它在大多数情况下都有效 但似乎
  • 在 for 循环中突破 Promise 块

    我有以下代码 this storeNameValidate function stores var deferred q defer console log stores for storeIndex in stores this name
  • jquery .html() 不适用于 ie8

    我有一个 jquery 函数 它对 Web 服务器上的 Web 服务方法进行 ajax 调用 该方法返回一个包含数据的 html 表 我正在使用 html 渲染 div 上的返回值 这适用于 Firefox Chrome Safari 但不
  • 为什么“jQuery-Rails”经常位于资产组之外

    为什么我经常看到gem jquery rails之外的 assets group group assets do gem sass rails gt 3 1 0 gem coffee rails gt 3 1 0 gem uglifier
  • 时间序列折线图与轴不同步

    本实验基于这个d3官方例子 http bost ocks org mike path 我想要实现的是可视化时间序列数据的最后 x 分钟 我有这个代码的副本jsfiddle http jsfiddle net 225dC 3 单击以添加新数据
  • Google Calendar API:获取指定日期的空闲时段列表

    我需要获取我的谷歌日历中的免费时段列表 现在我只是获取事件列表 我在用谷歌日历 https www npmjs com package google calendar npm google calendar events list calO
  • ajaxStart() 仅调用一次,但 ajaxComplete() 调用多次

    我想对页面上的每个 AJAX 请求进行调用 I read here http docs jquery com Ajax Events that ajaxStart 全局事件 如果启动 Ajax 请求并且当前没有其他 Ajax 请求正在运行
  • Django pbkdf2_sha256 JS 实现

    我有一个来自 django 的数据库 我想从 Node js 中使用它 我有一个任务 验证用户身份 从数据库可知 算法 pbkdf2 sha256 salt 10000 次迭代和 base64 编码的哈希值 我必须在 JS 中执行哪些步骤才
  • 以编程方式访问使用数据 URI 作为源的 iframe

    我正在使用 数据 URI 以编程方式创建一个 iframe 该框架加载良好 但似乎以编程方式使用 iframe 会遇到跨域安全检查 var iframeDoc document getElementById myFrame contentW
  • jQuery 仅附加一次

    所以我有这个 jQuery document ready function var nav nav var logo img src img logo png window scroll function if this scrollTop
  • 如何使我的响应式网站在手机上支持“请求桌面网站”?

    我有一个响应灵敏的动态网站 Java Servlet 驱动且完全手工编码 由于它是一个返回数据表的科学站点 因此某些选项在较小的视口宽度下不可用 然而 可能有些用户更喜欢在桌面网站上挣扎才能访问这些选项 我希望适应他们 我的问题是 对于 i
  • 为什么事件属性不容易获取?

    我有以下代码 HERE https jsfiddle net 5n2zagjc 2 是可编辑的示例 用法 在输入字段中键入并观看控制台 function test event let keys Object keys event let k
  • 返回语句后的声明

    function f return f1 function f1 return 5 f returns 5 为什么这有效 之后声明局部函数有什么好处return 这是好的做法吗 它之所以有效 是因为函数声明都是由解释器在第一次传递时评估的

随机推荐

  • 更新 Azure DevOps 中不同存储库中的 NuGet 参考

    我已经使用 Git 在 Azure DevOps 中设置了一个多存储库 为简单起见 假设我有 2 个存储库 存储库 A 和 B Repo A 的结果是一个公共库 DLL 存储库 B 引用存储库 A 生成的 DLL 通过 NuGet 包 存储
  • 当变量保存值时插入 COUNTIF 公式

    考虑 Cells 2 Q Formula COUNTIF P 1 P1 P2 0 当我有一个保存值的变量时 如何插入这些公式 有时我必须从 3550 行和 4000 行开始公式 这取决于数据 好吧 当我用谷歌搜索时 我什么也没找到 他们都使
  • 无需越狱即可检测传入的短信或 iMessage

    在我的应用程序中 我只是尝试检测传入的 SMS 或 iMessage 我不需要知道它来自哪里或其内容 只要知道它进来即可 我见过很多越狱解决方案 有没有办法在不越狱的情况下在 iOS 6 中做到这一点 看起来如果没有越狱就不可能做到这一点
  • 如何自定义浮动操作按钮形状?

    我正在尝试创建一个具有自定义形状的自定义 FAB 我尝试过设置android background随着shapeAppearanceOverlay and shapeAppearance财产 但仍然没有运气
  • 如何使用 Firefox SDK 插件将 iframe 附加到托管页面?

    Assume frame htmlFirefox SDK 插件中的数据文件夹内 如何附加 iframe 并定义frame html作为它的来源 附加信息 由于CPS 不可能使用内联源 所以我不能使用data load frame html
  • Ubuntu 11.04 上的 wx.TaskBarIcon

    Ubuntu 11 04下Unity没有托盘 如何让图标出现在 Unity 中的某个位置 wx TaskBarIcon 没有出现在任何地方 谢谢 使用 Ubuntu Unity 桌面环境 即 Ubuntu 11 04 或 11 10 您需要
  • Struts 2 中的 等效项

    下面是 html 标签 multibox 我想将其迁移到 struts 2
  • Strapi:是否可以跟踪用户修改内容?

    我目前正在对 Strapi 进行一些研究 以便在其上构建我的 API 我想知道是否可以在 JSON 中公开一个字段 该字段包含有关负责对特定内容进行最后修改的用户的信息 我知道 API 默认在 JSON 对象中公开一个 updatedAt
  • matplotlib 轴刻度标签由散点图覆盖(使用脊柱)

    我想让我的轴穿过散点图中的原点 0 0 这就是我在下面的示例中设置脊柱位置的原因 问题是散点图上的实际数据点覆盖了轴刻度标签 因此无法看到它们 如何让 matplotlib 用我的轴刻度标签 覆盖 数据点以便可以看到它们 import nu
  • 使用 PDFBox ETSI 验证进行 Pades 签名

    我使用 PDFBOX 创建了 PDF PAdES 签名 并且正在使用 ETSI 在线验证器1 它需要注册 现在我在报告中只收到两个错误 但我有点不知道它们是什么或如何修复它们 这是 etsi 在线验证器报告 这是我用来签名的代码 Overr
  • 如何使用 Swing 和 JLayer<> 在 Java 中制作模糊的 JFrame/JDialog?

    我正在尝试模糊我的 JFrame 这个想法是使用 JLayer LayerUI 模糊 JFrame 中的所有组件 控件 这是我到目前为止所做的 这是制作模糊效果的 LayerUI 类 import java awt Component im
  • 自 Google Scripts V8 更新以来搜索模式错误

    自从谷歌强制更新后 这个项目正在我们由 Chrome V8 提供支持的新 Apps 脚本运行时上运行 我收到以下错误 但我不明白为什么 异常 无效参数 recreateReferral 处的 searchPattern recreateRe
  • 将用户区域设置包含到 Keycloak ID 令牌中

    我希望 Keycloak 1 4 0 将用户选择的区域设置包含到 ID 令牌中 我已经创建了一个用户属性映射器 它应该将区域设置属性映射到令牌 但它不起作用 有人知道怎么做这个吗 提前致谢 编辑 我从这堂课中学到了关于 Keycloak L
  • MVC 验证消息 - 本地化?

    我有个问题 主服务器和本地主机上的文件完全相同 但在本地主机中 我有我的母语的消息 例如 Pole Email jest wymagane 在主服务器上我有 The Email field is required 正如我所说 文件是完全相同
  • QML 渲染引擎:帧刷新事件

    性能考虑因素和建议文章说 作为应用程序开发人员 您必须努力让渲染 引擎实现一致的每秒 60 帧的刷新率 60 FPS 意味着每个帧之间大约有 16 毫秒 可以在其中进行处理的框架 其中包括处理 将绘制基元上传到图形硬件所需的 是否有事件或信
  • 法语翻译引发“ValueError('复数形式的无效标记:%s'%值)”

    我想处理我的网站的法语版本 我将 Django 2 2 与 i18n 一起使用 并且我已经在 settings py 中设置了语言环境变量 Internationalization https docs djangoproject com
  • 使用身份验证 cookie 打开 WebSocket 连接

    我有同样的问题Android 中的 Websocket 和 cookie 我一直在尝试按照第一条评论的建议解决这个问题 WebSocketClient URI serverUri 草稿协议Draft 映射httpHeaders int co
  • 在 Java 中打印 BufferedImage 的正确方法

    我想知道是否有正确的方法来打印BufferedImage在爪哇 基本上我已经创建了一个运行良好的照片处理程序 我可以保存图像等 但我真正的目标是将其发送到打印机软件 以便您可以选择要打印的页数和页面类型 所以我的简短问题是 如何将缓冲图像发
  • Object var 和 Object* var = new Object() 之间的区别

    如果我有一个名为 Object 的类 那么创建一个实例有什么区别 Object var and Object var new Object 这里你在堆栈上创建 var Object var 所以在上面的内容中 var是实际的对象 这里您在堆
  • Javascript 在页面上查找文本

    我需要在类似于以下内容的 HTML 上运行搜索和替换 我需要有 查找下一个 替换 和 全部替换 选项 诀窍是我需要运行 AJAX 请求替换值后 更新数据库中每个字段的值 我遇到的唯一麻烦是我不确定如何搜索内容 sheet并将这些值替换为用户