Markieren Sie geschützte Leerzeichen in der HTML-Seite oder im WordPress-Editor

Beim Bearbeiten in WordPress verwende ich manchmal geschützte Leerzeichen in Kopfzeilen, damit Wörter zusammenbleiben. Wenn ich speichere, sind die geschützten Leerzeichen vorhanden, aber sie sehen aus wie normale Leerzeichen, sodass ich sie nicht sehen kann. Außerdem erstellt WordPress geschützte Leerzeichen, wenn ich den Hauptteil meines Beitrags eingebe, die ich irgendwie entfernen muss.

Ich dachte, es wäre einfach, ein Bookmarklet zu erstellen, das jQuery verwendet, um geschützte Leerzeichen auf einer Webseite oder im Editor hervorzuheben. Ich bin jedoch nicht gut mit regulären Ausdrücken, oder vielleicht mache ich etwas anderes falsch. Hier ist der jQuery-Code:

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

Hier ist ein jFiddle:
https://jsfiddle.net/y18e0c1w/

========

Hier hat mir Maraca geholfen (siehe unten). Ich habe das Bookmarklet mit seinem Code erstellt und der Spanne einen white-space:nowrap hinzugefügt, sodass Sie die Hervorhebung immer noch sehen können, wenn sie sich am Ende einer Zeile befindet. Hier ist es:

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>'}));

Denken Sie daran, dass jQuery bereits auf der Seite geladen ist. Es spielt nicht gut mit dem WordPress-Backend, aber es funktioniert auf dem Frontend und das ist gut für mich im Moment. Hoffe, jemand anderes findet das auch nützlich.

Habe es: 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>'
    })
);

Die ersten beiden Funktionen sind nur Hilfsfunktionen. Dann ersetze ich   um eine Spanne, das war’s.

Beachten Sie, dass ich ein normales Leerzeichen in der Spanne verwendet habe, da es dann kein Problem mit der wiederholten Ausführung gibt. Sonst würdest du das wickeln   mit Span-Tags jede Execution.

Die schnelle und schmutzige Lösung für den ganzen Körper: https://jsfiddle.net/y18e0c1w/7/