How to manipulate text in reading view?

New developer here, just letting you know I’m not super experienced with the terminology and design choices.

I’m trying to make a [something] (plugin/macro/?) that, when switching/opening in Reading View, will modify the contents.

More specifically, I’d like to hide “{key=value key=value}” from Reading view, while still being able to edit them in Editing View.

I’ve tried using the Sample Plugin as my base through innerHTML modifications, but that breaks Obsidian in horrible ways, so I’m doing something wrong but can’t pinpoint it.

I’m naively, as a test, looking for ‘layout-change’ events, and modifying the ‘.markdown-reading-view’ through innerHTML manipulation.

...
this.registerEvent(
	this.app.workspace.on('layout-change', this.onLayoutChange)
)
...
	private readonly onLayoutChange = (): void => {
		const previews: HTMLElement[] = Array.from(
			document.querySelectorAll('.markdown-reading-view')
		)
		previews.forEach((preview) => {
			const needle = /div>{(.*?)}/g
			let found = preview.innerHTML.match(needle);
			if(found) {
				let inner = preview.innerHTML;
				inner = inner.replace(needle,'div>');
				preview.innerHTML = inner;
			}
		})
	}
...

This, as a result, massively breaks the Reading View for all documents, even ones not containing the needle I’m looking for.

I’m not convinced a generic(?) Plugin is where I can/should do this, I’ve read indications that some things are more suitable to View Plugins, but I’m not sure what the (right) choices are.

Any tips welcome.

Maybe you need a markdown post processor

You should figure out in which element you will insert a {k: v}, then edit its textContent only.

Very nice, that works!