Question

我需要更改元素文本中特定单词的颜色。我尝试添加和删除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>');
}

文字看起来像"°C,kW/h,cm"。

现在发生的事情是每次调用函数时，都会添加span标记但从不删除。我怎样才能用Javascript / JQuery实现这个目标？

期望的行为：

当使用"cm"作为参数调用函数时。我希望字符串变为"°C,kW/h,<span id=highlighted>cm</span>"。现在，如果使用"kW/h"再次调用该函数，我希望字符串变为"°C,<span id=highlighted>kW/h</span>,cm"

Answer 1

使用jQuery，您可以使用.unwrap()：

<强>尝试：

＆＃13;

$(document).ready(function(){
    $("label span").contents().unwrap()
});

＆＃13;

label {color:green}
#highlighted{color:red}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<label>°C,<span id=highlighted>kW/h</span>,cm</label>

＆＃13;

Answer 2

更改

.replace('/<span id="highlighted">(.*)<\/span>/g','$1')

到

.replace(/<span id="highlighted">(.*)<\/span>/g,'$1')

第一个是字符串，第二个是RegEx，你需要后者。

了解replace的工作原理。第一个参数是字符串或RegEx。

Answer 3

添加我的no-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>

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

3 个答案: