程序员经验分享-hwhale

将html中的特定内容替换为JS

2024-04-22

我有一个 html 文件和 JS 文件

所以我的 html 文件中有 svg 的语法：

<body>
    <svg width="500" height="100">
        <circle id="circle1" cx="20" cy="20" r="10"
        style="stroke: none; fill: #ff0000;"/>  
        <text x="47.872" y="11.064">{home/sensors/temp/kitchen} °C</text>
        <circle id="circle1" cx="20" cy="20" r="10"
        style="stroke: none; fill: #ff0000;"/>
        <title x="47.872" y="11.064" >{home/sensors/temp/bathroom} °C</title>
        <circle id="circle1" cx="20" cy="20" r="10"
        style="stroke: none; fill: #ff0000;"/>
        <text x="47.872" y="11.064">{home/sensors/temp/room} °C</text>
    </svg>
    <script type="text/javascript" src="../scripts/link.js"></script>
</body>
</html>

目前，我的 link.js 中只有这个：

let listTickets = new Map([
                          ['0', '{home/sensors/temp/kitchen}'],
                          ['1', '{home/sensors/temp/bathroom}'],
                          ['2',  '{home/sensors/temp/room}']
]);

let listNumber = new Map([
                          ['0', '24'],
                          ['1', '22'],
                          ['2', '25']
]);

// var topicMatch = line.match(/\{[\w\/]+\}/g); // think need to use regex

所以我想要在 js 文件中得到什么，就是我们在 html 文件中得到如下语法：

"{ + content + }

需要用他的值替换（在我的导航器中而不是在文件中）相同的语法，例如，我们正在读取 html 文件：

detect first content : {home/sensors/temp/kitchen} => need to change by '24'
detect second content : {home/sensors/temp/bathroom} => need to change by '22'
detect first content : {home/sensors/temp/kitchen} => need to change by '25'

感谢您的帮助


你可以使用这个JS代码：

var all = document.getElementsByTagName("*");
for (var i = 0, max = all.length; i < max; i++) {
  for (let [key, value] of listTickets) {
    if (all[i].innerHTML.includes(value)) {
      all[i].innerHTML=all[i].innerHTML.replaceAll(value, listNumber.get(key));
    }
  }
}

它找到给定字符串的任何匹配项listTickets映射到你的html中，并用以下值更改它们listNumber字符串键的映射。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

SVG

将html中的特定内容替换为JS 的相关文章

随机推荐

  • 任何遍历嵌套字典的函数式编程方法？

    我正在尝试找到更好的方法来实现这一点 d a b c 4 l a b c for x in l d d x print d 4 我正在学习函数式编程 所以我只是尝试随机出现的例子 Use reduce http docs python or

  • 设备有“回调”功能吗？

    用户登录后 我想手动记录此事件并增加数据库中的计数器列 有没有类似的东西after login in Devise 就像ActiveRecord s before save Devise 在幕后使用 Warden Warden 为您提供了许

  • d3树计算所有孩子的数量

    我有一个基于以下内容的 d3 树 http bl ocks org mbostock 1093025 http bl ocks org mbostock 1093025 我如何计算所有孩子的数量 我已经尝试过这个 但是它计算了树中的所有行

  • 特征中的字段未及时初始化

    我不明白为什么这个领域encryptKey在调用类构造函数时 以下代码中的值并未初始化为 3 trait Logger println Construction of Logger def log msg String println ms

  • 使用 hibernate 获取数据库中的所有表

    有没有办法使用 hibernate 检索数据库中所有表的名称 我执行了查询SELECT TABLE NAME FROM USER TABLES在 oracle Db 中 它工作得很好 但当涉及到 DB2 时 就不会了 您可以使用 List

  • 等待嵌套异步调用完成

    我有一系列嵌套的异步调用需要在我的代码继续之前完成 函数 save part1 调用 sqlite 数据库并返回感兴趣的行 对于每一行 我都会进行 ajax 调用以远程保存它们 根据我所读到的有关 Promise 和 Deferred 的内

  • Visual Studio - 过滤掉 nvcc 警告

    我正在编写 CUDA 程序 但收到令人讨厌的警告 Warning Cannot tell what pointer points to assuming global memory space 这是来自 nvcc 我无法禁用它 有没有办法过

  • CustomVision：操作返回无效状态代码：“NotFound”

    我正在使用 NuGet 包Microsoft Cognitive CustomVision Prediction版本1 2 0 我创建了 1 个试验项目并用一些图像对其进行了训练 现在 当我尝试使用 API 调用 API 进行预测时Pred

  • 使用node.js访问DOM

    我想访问 html 文件并使用 node js 通过 id 获取元素 这是我的 html 文件

  • 如何有效计算文档流中文档之间的相似度

    我收集文本文档 在 Node js 中 其中一个文档i表示为单词列表 考虑到新文档以文档流的形式出现 计算这些文档之间相似性的有效方法是什么 我目前对每个文档中单词的归一化频率使用余弦相似度 我不使用 TF IDF 词频 逆文档频率 因为我

  • 未提供所需的防伪令牌或该令牌无效 - 仅限 Safari

    我有一个具有典型 xss 保护的 asp net mvc 2 项目 在每个表格内和 ValidateAntiForgeryToken 在每个帖子操作上 这在 Chrome Firefox 和 IE 中按预期工作 但我在 Safari v 5

  • 检查一个点是否在 ConvexHull 中？

    我无法理解如何计算 n 维点是否在 n 维凸包内 这里提出了一个非常相似的问题 相同 查找点是否位于点云的凸包中的有效方法是什么 https stackoverflow com questions 16750618 whats an eff

  • Archiva 忽略 Security.properties

    似乎 archiva 2 2 完全忽略了安全属性 我正在关注这个文档 https archiva apache org docs 2 2 0 adminguide customising security html我已经在下面设置了 sec

  • 创建 Javascript Api 接口

    我目前正在研究 php 中查询 sql 数据库的解决方案 但是 我希望其他网站能够查询数据库 或php中的函数 我搜索谷歌 但由于跨域策略 我认为 我无法找到如何将这些函数公开给javascript 有人知道我该怎么做吗 Try soap

  • jQuery鼠标的.click()是通过键盘导航启动的

    我发现 jQuery 的奇怪行为click事件 如果我们使用键盘导航 辅助功能情况 则通过 Enter 或 Space 启动单击 这取决于我们使用的是哪个 HTML 元素 jsfiddle 上有一个测试页面 您可以尝试在结果框架中使用键盘导

  • iOS-将变量传递给视图控制器

    我有一个带有视图控制器的视图 当我在屏幕上显示此视图时 我希望能够从调用类向它传递变量 以便我可以设置标签等的值 首先 我只是尝试为其中一个标签创建一个属性 然后从调用类中调用它 例如 SetTeamsViewController vc S

  • 如何在 Edge 浏览器中使用 height:-webkit-fill-available？如何让 div 填充 Edge 中的可用空间？

    I am using bootstrap to preview the mobile device as follows 它在 Chrome 中运行得非常好 但不是边缘 我的 HTML CSS 代码如下 frame border radiu

  • HTML 验证器“自关闭语法”和“非空”错误

    我在使用 W3 Validator 验证代码时遇到问题 我是网页设计新手 有人能帮我吗 验证器声明 错误 在非 void HTML 元素上使用了自闭合语法 gt 忽略斜杠并将其视为开始标记 从第 15 行第 1 列开始 至第 15 行 第

  • Excel 日期到字符串的转换

    在 Excel 工作表的单元格中 我有一个日期值 例如 01 01 2010 14 30 00 我想将该日期转换为文本 并且还希望文本看起来与日期完全相同 所以日期值为01 01 2010 14 30 00应该看起来像01 01 2010

  • 将html中的特定内容替换为JS

    我有一个 html 文件和 JS 文件 所以我的 html 文件中有 svg 的语法

热门标签