jQuery：将窗口宽度小于 500px 的" "替换为正常空格

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, " "));
});
}
});

这将循环通过<body/>内的每个元素，并用正常空间替换每个 。很明显，我在回答之前对它进行了测试，结果如预期一样。

Answer 2

1. 您不需要调用额外的函数。jQueryon load和CCD_。

2. 让代码在整个页面中查找所有 将给页面带来非常繁重的处理负载。尝试将其缩减为特定的CCD_ 9。为了做到这一点，只需将$(document)替换为特定div的class name或id。示例：$(".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

尝试使用regex

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
}