JSFiddle - React, Tailwind, and code Playground

by Sillvva

HTML

<div>Everyone sees this part of the message</div>
<div showto="gm Sillvva">Only the GM and Sillvva see this part.</div>

JavaScript

let game = {
	user: {
    	name: 'Travis',
        //isGM: true,
        character: {
        	name: 'Grog'
        }
    }
};

let style = document.createElement('style');

style.type = 'text/css';
style.innerHTML += '[showto] { display: none; }\n';
// GM
if (game.user.isGM) style.innerHTML += '[showto~="gm"], [showto~="GM"] { display: initial; }';
// Player Name
style.innerHTML += game.user.name
	.replace(/[^a-z0-9\- ]/gi,' ').replace(/ {2,}/g,' ').split(' ')
    .reduce((string, word) => string+'[showto~="'+word+'"]', '')+' { display: initial; }\n';
// Character Name
style.innerHTML += game.user.character.name
	.replace(/[^a-z0-9\- ]/gi,' ').replace(/ {2,}/g,' ').split(' ')
    .reduce((string, word) => string+'[showto~="'+word+'"]', '')+' { display: initial; }\n';

document.getElementsByTagName('head')[0].appendChild(style);