jQuery: замените "" обычными пробелами для ширины окна менее 500 пикселей

Question

Я хотел бы заменить все   в моих HTML файлах обычными пробелами для ширины окна в 500px.

. Для этого я начал с этого кода:

window.onresize = xza;
window.onload = xza;

function xza() {
  let window_size = window.matchMedia("(max-width: 500px)");
  if (window_size.matches) {
    $("document.documentElement").find(" ").replaceWith(" ");
  } else {
    // nothing should happen or it should be like it was before
  }

К сожалению, это не работает. Может кто-то мне помочь, пожалуйста? :)

Answer 1

Вы должны иметь в виду, что   не простой текст. Это специальный символ (html сущность). Таким образом, чтобы правильно заменить его, вам нужно будет использовать Unicode:

$(window).on("load resize", function(){
    if($(window).width() < 500){
        $("body").each(function() {
            var text = $(this).text();
            $(this).text(text.replace(/\u00a0/g, " "));
        });
    }
});

Это будет l oop через каждый элемент внутри <body/> и заменять каждый   нормальным пробелом. Очевидно, я проверил его, прежде чем ответить, и он работает, как ожидалось.

Answer 2

1. Вам не нужно вызывать дополнительную функцию. jQuery on load и on resize выполняют эту работу.

2. Если ваш код будет выглядеть для всех   на всей странице, это приведет к очень большой загрузке обработки страницы. , попробуйте уменьшить его до указанного c div. Для этого просто замените $(document) на class name или id указанного c div. Пример: $(".someClass")

$(window).on("load",function () {
  if ($(window).width() < 500) {
    $(document).text($(document).text().replace(/&nbsp;/g, ' '));
    console.log("Changing");
  }
});
$(window).on("resize",function () {
  if ($(window).width() < 500) {
    $(document).text($(document).text().replace(/&nbsp;/g, ' '));
    console.log("Changing");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Bla&nbsp;bla&nbsp;bla&nbsp;bla</p>

Answer 3

Попробуйте использовать регулярное выражение

window.onresize = xza;
window.onload = xza;

function xza() {
  let window_size = window.matchMedia("(max-width: 500px)");
  if (window_size.matches) {
  let doc = $(document)
    doc.text(doc.text().replace(/nbsp;/g, ' '))
  } else {
    // nothing should happen or it should be like it was before
  }