javascript - 在 HTML 页面或 WordPress 编辑器中突出显示不间断空格

Question

在 WordPress 中进行编辑时，我有时会在标题中使用不间断空格，以便单词保持在一起。当我保存时，不间断空格就在那里，但它们看起来像普通空格，所以我看不到它们。此外，当我输入帖子正文时，WordPress 会创建不间断空格，而我必须以某种方式将其删除。

我认为创建一个使用 jQuery 突出显示网页或编辑器中不间断空格的书签会很容易。但是，我不擅长正则表达式，或者也许我做错了其他事情。这是 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/

========

马拉卡在这里帮助了我(见下文)。我用他的代码创建了书签，并在跨度中添加了一个空白:nowrap，以便您仍然可以看到突出显示(如果它位于行尾)。这是:

javascript:function%20escapeRegExp(e){return%20e.replace(/([.*+?^=!:${}()\]\[\/\\])/g,"\\$1")}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, '\\$1');   
}

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

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

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

注意，我在span中使用了普通的空格，因为这样重复执行就没有问题了。否则，您将在每次执行时使用 span 标记包装  。

针对全身的快速而肮脏的解决方案:https://jsfiddle.net/y18e0c1w/7/