Javascript 用JS替换html中行中的特定内容_Javascript_Html_Svg

Javascript 用JS替换html中行中的特定内容

javascript html svg

Javascript 用JS替换html中行中的特定内容,javascript,html,svg,Javascript,Html,Svg,我有一个html文件和JS文件因此，我的html文件中有一个svg语法： <body> <svg width="500" height="100"> <circle id="circle1" cx="20" cy="20" r="10" style="stroke: none; fill: #ff

我有一个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>

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文件中，当我们在html文件中有一个语法时，比如：

"{ + content + }

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

<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>

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));
    }
  }
}

var all=document.getElementsByTagName（“*”）；
对于（变量i=0，max=all.length；i


它在html中的listTickets
map中查找给定字符串的任何匹配项，并使用字符串键的listNumber
map值对其进行更改。
现代Web组件（在所有现代浏览器中都受支持）为您提供了更大的灵活性
并将源SVG作为模板文本字符串进行处理，以替换值（或执行如下函数：color
does）


#温度{背景：粉红色}
#温度循环{行程：无；r:${size}
${kitchen}°C
${浴室}摄氏度
${room}°C
定义（“温度仪表板”，类扩展HtmleElement{
connectedCallback（）{
setTimeout（（）=>{//等待innerHTML被完全解析
this.svgsource=this.querySelector（“模板”）.innerHTML；
让数据={浴室：23，厨房：24，房间：19}；
此.setdata（数据）；
})
}
设置数据（数据输入）{
设fulldata={
尺码：15，
颜色：（度）=>{
让coldColor=this.getAttribute（“cold”）；
让warmColor=this.getAttribute（“warm”）；
return`fill=“${degrees<20？coldColor:warmColor}”`
},
…数据输入
}
常量parseTemplateLiteral=（str，data={}）=>{
设params=Object.keys（data.join（“，”）；
返回新函数（“p”，//函数savely解析模板文字
“return（（“+params+”）=>“+str+”`）（…Object.values（p））”（数据）；
}
this.innerHTML=parseTemplateLiteral（this.svgsource，fulldata）；
}
});