在 HTML 页面或 WordPress 编辑器中突出显示 Non-breaking 个空格

Question

在 WordPress 中编辑时，我有时会在 headers 中使用 non-breaking 个空格，以便单词保持在一起。当我保存时， non-breaking 空格在那里，但它们看起来像普通空格，所以我看不到它们。此外，当我输入 post 的 body 时，WordPress 会创建 non-breaking 空格，我必须以某种方式将其删除。

我认为创建一个使用 jQuery 突出显示网页或编辑器中的 non-breaking 空格的小书签会很容易。但是，我不擅长正则表达式，或者我做错了什么。这是 jQuery 代码：

    $('p').html($('p').html().replace(/ [\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000]/g, '<span class="red">&nbsp;</span>'));

这是一个 jFiddle： https://jsfiddle.net/y18e0c1w/

========

Maraca 帮我解决了这个问题（见下文）。我用他的代码创建了小书签，并在 span 中添加了一个 white-space:nowrap ，这样如果它在行尾，你仍然可以看到突出显示。这是：

javascript:function%20escapeRegExp(e){return%20e.replace(/([.*+?^=!:${}()\]\[\/\])/g,"\")}function%20replaceAll(e){return%20e.string.replace(new%20RegExp(escapeRegExp(e.search),"g"),e.replace)}jQuery("body").html(replaceAll({string:jQuery("body").html(),search:"&nbsp;",replace:'<u%20style="background:#FF0;white-space:nowrap">%20</u>'}));

请记住，它依赖于已加载到页面上的 jQuery。它不适用于 WordPress 后端，但它适用于前端，这对我来说现在很好。希望其他人也觉得这很有用。

Answer 1

知道了：https://jsfiddle.net/y18e0c1w/2/

function escapeRegExp(s) {
    return s.replace(/([.*+?^=!:${}()\]\[\/\])/g, '\');   
}

function replaceAll(p) {
 return p['string'].replace(new RegExp(escapeRegExp(p['search']), 'g'), p['replace']);   
}

$('p').html(
    replaceAll({
        string: $('p').html(),
        search: '&nbsp;',
        replace: '<span class="red"> </span>'
    })
);

前两个函数只是辅助函数。然后我用一个跨度替换 ，就是这样。

注意，我在span里用了一个正常的space，因为这样重复执行就没有问题了。否则你会在每次执行时用 span 标签包装  。

全身的快速粗略解决方案：https://jsfiddle.net/y18e0c1w/7/

在 HTML 页面或 WordPress 编辑器中突出显示 Non-breaking 个空格

Highlight Non-breaking spaces in HTML page or WordPress editor

javascript

regex

wordpress

jquery

editor