Replace specific text without affecting styling

Need to replace colons wherever they're found in specific elements with id's. This works but for some reason also replaces the stylin开发者_运维技巧g attached to the elements:

$(document).ready(function(){

  $("#element").each(function () { //for element 
      var s=$(this).text(); //get text
       $(this).text(s.replace(/:/g, ' ')); //set text to the replaced version
  });

});

I tried attaching a class to the element but it made no difference. How do I just remove the colons without affecting anything else? Demo

---

I think you want to use the .html() method: http://api.jquery.com/html/

because according to this: http://api.jquery.com/text/

it calls the DOM method .createTextNode(), which replaces special characters with their HTML entity equivalents (such as < for <)

$(document).ready(function(){
  $("#element").each(function () { //for element 
      var s=$(this).html(); //get text
       $(this).html(s.replace(/:/g, ' ')); //set text to the replaced version
  });
});

---

What is the HTML code in #element ?

If replacing the text in #element changes the style, it means that #element also contains some HTML tags (and the style is actually applied on those tags).

Try this:

$(document).ready(function() {
  $("#element").each(function () {
    (function trim_colons(el) {
      for (var i = 0; i < el.childNodes.length; ++i) {
          var c = el.childNodes[i];
          if (c.nodeType == 1) trim_colons(c);
          else if (c.nodeType == 3) c.nodeValue = c.nodeValue.replace(/:/g, ' ');
      }
    })(this);
  });
});

This will correctly remove : characters, without changing the style.

---

Certainly you did'nt meant to have text in input types replaced ha! For html elements other than input elements to fetch innerhtml you should use

var s=$(this).html();