Javascript 在函数调用中添加和删除标记_Javascript_Jquery

Javascript 在函数调用中添加和删除标记

javascript jquery

Javascript 在函数调用中添加和删除标记,javascript,jquery,Javascript,Jquery,我需要更改元素文本中特定单词的颜色。我尝试添加和删除span标记以更改单词的样式，但之后无法删除它。这是我试过的代码 function changeColor(unit){ document.getElementsByClassName("label")[0].innerHTML=document.getElementsByClassName("label")[0].innerHTML.replace('/<span id="highlighted">(.*)<\/span&g

我需要更改元素文本中特定单词的颜色。我尝试添加和删除span标记以更改单词的样式，但之后无法删除它。这是我试过的代码

function changeColor(unit){
document.getElementsByClassName("label")[0].innerHTML=document.getElementsByClassName("label")[0].innerHTML.replace('/<span id="highlighted">(.*)<\/span>/g','$1');
document.getElementsByClassName("label")[0].innerHTML=document.getElementsByClassName("label")[0].innerHTML.replace(unit,'<span id="highlighted">' + unit + '</span>');
}

功能更改颜色（单位）{
document.getElementsByClassName（“标签”）[0]。innerHTML=document.getElementsByClassName（“标签”）[0]。innerHTML.replace（'/（.*）/g'，'$1'）；
document.getElementsByClassName（“label”）[0]。innerHTML=document.getElementsByClassName（“label”）[0]。innerHTML.replace（单位“，+unit+”）；
}

文本如下所示

“°C，kW/h，cm”

现在的情况是，每次调用函数时，都会添加span标记，但从未删除。如何使用Javascript/JQuery实现这一点

期望的行为：

使用say

“cm”

作为参数调用函数时。我希望字符串变成

“°C，kW/h，cm”

。现在，如果使用

“kW/h”

再次调用该函数，我希望字符串变为

“°C，kW/h，cm”

，使用jQuery可以使用：

试试看：

$（文档）.ready（函数（）{
$（“标签跨度”）.contents（）.unwrap（）
});
标签{颜色：绿色}
#突出显示的{颜色：红色}

°C，kW/h，cm
变化
.replace('/<span id="highlighted">(.*)<\/span>/g','$1')

.replace（'/（.*）/g'，'$1'）

到
。替换（/（.*）/g，“$1”）

第一个是字符串，第二个是正则表达式，您需要后者
看看如何运作。第一个参数是字符串或正则表达式。
添加我的无jQuery解决方案：

制作3个跨度（s1、s2、s3）
根据单位输入更改颜色样式

因此：
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script>
  function changeColor(unit) {
    var allUnits = [ '°C', 'kW/h', 'cm' ];
    for (var i = 0; i < allUnits.length; i++) {
      if (unit == allUnits[i]) 
        document.getElementById('s'+(i+1)).style = 'color:#00FFFF';
      else
        document.getElementById('s'+(i+1)).style = 'color:#000000';
    }
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    changeColor('kW/h');
  });
  </script>
</head>
<body>
  <span id="s1">°C</span>,<span id="s2">kW/h</span>,<span id="s3">cm</span>
</body>
</html>


功能更改颜色（单位）{
var allUnits=['°C'，kW/h'，cm']；
对于（变量i=0；i
也向我们展示html。请详细描述需求。您到底想要实现什么？'/（.*）/g'
是一个字符串，此时您需要一个正则表达式。删除”
s。请参阅显示所需行为的编辑，thanks@loli如果您打算接受此解决方案，请记住，replace
的错误行可以删除，因为它是多余的。@Xufox我认为在HTML中使用.replace不是一个好主意，甚至删除所有可能发生的事件。最好的方法是使用此方法修改Dom。
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script>
  function changeColor(unit) {
    var allUnits = [ '°C', 'kW/h', 'cm' ];
    for (var i = 0; i < allUnits.length; i++) {
      if (unit == allUnits[i]) 
        document.getElementById('s'+(i+1)).style = 'color:#00FFFF';
      else
        document.getElementById('s'+(i+1)).style = 'color:#000000';
    }
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    changeColor('kW/h');
  });
  </script>
</head>
<body>
  <span id="s1">°C</span>,<span id="s2">kW/h</span>,<span id="s3">cm</span>
</body>
</html>