Заменить определенный текст, не влияя на стиль

Question

Необходимо заменить двоеточия, где бы они ни находились в определенных элементах, на идентификаторы. Это работает, но по какой-то причине также заменяет стиль, прикрепленный к элементам:

$ (документ) .ready (функция () {

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

});

Я пытался прикрепить класс к элементу, но это не имело никакого значения. Как мне просто удалить двоеточия, не влияя ни на что другое? Демо

Answer 1

Я думаю, вы хотите использовать метод .html (): http://api.jquery.com/html/

потому что согласно этому: http://api.jquery.com/text/

он вызывает метод DOM .createTextNode (), который заменяет специальные символы их эквивалентами сущности HTML (например, < для <)

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

Answer 2

Что такое HTML-код в #element?

Если замена текста в #element меняет стиль, это означает, что #element также содержит некоторые теги HTML (и стиль фактически применяется к этим тегам).

Попробуйте это:

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

Это правильно удалит : символов без изменения стиля.

Answer 3

Конечно, вы не хотели заменять текст в типах ввода ха!Для html-элементов, отличных от элементов ввода, для извлечения innerhtml вы должны использовать

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