Заменить строку во всех div, кроме указанных c div

Question

Я хочу заменить все запятые в div '# tab-content-loader', кроме коннента в теге скрипта.

<div id="tab-content-loader">
   <div class='test1'>
    Hi, hello ,
   </div>
   <div class='test2'>
    Loream, ipsum
   </div>
  <div class="modal-body">
   <script>
      jQuery('#grid').css({position : 'relative' , width : 'inherit' , left:'inherit' , top:'inherit'});
   </script>
 </div>
</div> 

Я заменяю запятую как

if ($("#tab-content-loader").length > 0 ) {
          $("#tab-content-loader").html( $("#tab-content-loader").html().replace(/,/g,"<span class='comma'>,</span>"));  
        }
 The above code replace all the comma even inside script.I want to exclude script tag content while replacing 

теперь мой вывод как

<div id="tab-content-loader">
   <div class='test1'>
    Hi<span class='comma'>,</span> hello <span class='comma'>,</span>
   </div>
   <div class='test2'>
    Loream<span class='comma'>,</span> ipsum
   </div>
  <div class="modal-body">
   <script>
      jQuery('#grid').css({position : 'relative' <span class='comma'>,</span> width : 'inherit' <span class='comma'>,</span> left:'inherit' <span class='comma'>,</span> top:'inherit'});
   </script>
</div>
</div> 

Действительно, я ниже

<div id="tab-content-loader">
   <div class='test1'>
    Hi<span class='comma'>,</span> hello <span class='comma'>,</span>
   </div>
   <div class='test2'>
    Loream<span class='comma'>,</span> ipsum
   </div>
   <div class="modal-body">
   <script>
      jQuery('#grid').css({position : 'relative' , width : 'inherit' , left:'inherit' , top:'inherit'});
   </script>
 </div>
</div> 

Пробовал как ниже, но не работает

if($('.modal-body script').length > 0){
  $(".modal-body").find('.comma').contents().unwrap();
  console.log('inside unwrap');
}

Answer 1

Прежде всего, теги <script> никогда не должны заканчиваться вокруг DOM, особенно не при загрузке страницы - так как это приостановит синтаксический анализ DOM.
Поместите тег сценария прямо перед тегом </body>.

В противном случае ... вы можете просто игнорировать нарушающий DIV, используя :not селектор или .not() метод.

Использование $(this).text().replace

$("#tab-content-loader > div:not(.modal-body)").each(function() {
  $(this).html($(this).text().replace(/,/g, '<span class="comma">,</span>'));
});

.comma {
  background: fuchsia;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tab-content-loader">
  <div class='test1'>Hi, hello ,</div>
  <div class='test2'>Loream, ipsum</div>
  <div class="modal-body">
    <script>
      jQuery('#grid').css({
        position: 'relative',
        width: 'inherit',
        left: 'inherit',
        top: 'inherit'
      });
    </script>
  </div>
</div>

Answer 2

Было бы лучше переместить тег script, чтобы он был прямым потомком body. Если по какой-либо причине это невозможно, то вы можете использовать более продвинутый селектор jQuery, чтобы посещать только те элементы DOM, у которых нет дочерних элементов, и , которые не являются элементами script:

$("#tab-content-loader *:not(:has(> *)):not(script)").each(function () {
    this.innerHTML = this.innerHTML.replace(/,/g,"<span class='comma'>,</span>");
});

console.log($("#tab-content-loader").html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tab-content-loader">
   <div class='test1'>
    Hi, hello ,
   </div>
   <div class='test2'>
    Loream, ipsum
   </div>
  <div class="modal-body">
   <script>
      jQuery('#grid').css({position : 'relative' , width : 'inherit' , left:'inherit' , top:'inherit'});
   </script>
 </div>
</div>

Посещение отдельных конечных элементов также имеет то преимущество, что вам не нужно их воссоздавать, а это означает, что любые динамические c изменения, которые были сделаны в они (как и добавленные прослушиватели событий) не будут уничтожены.

Предполагается, что у текстовых узлов нет родственных элементов, но они всегда присутствуют в своих собственных элементах переноса.