bbcode | A BBCode parser and converter written in PHP | Parser library

Blazor documentation warns:

Only mutate the Document Object Model (DOM) with JavaScript (JS) when the object doesn't interact with Blazor. Blazor maintains representations of the DOM and interacts directly with DOM objects. If an element rendered by Blazor is modified externally using JS directly or via JS Interop, the DOM may no longer match Blazor's internal representation, which can result in undefined behavior. Undefined behavior may merely interfere with the presentation of elements or their functions but may also introduce security risks to the app or server.

This guidance not only applies to your own JS interop code but also to any JS libraries that the app uses, including anything provided by a third-party framework, such as Bootstrap JS and jQuery.

SCEditor is exactly one of those DOM-mutating libraries, and the effects of failure to observe that guidance you can see for yourself. (The ‘security risks’ bit is rather nonsensical: if your app can be made insecure merely by modifying client-side code, then it wasn’t very secure to begin with. But it’s otherwise good advice.)

Blazor does provide some interoperability with external DOM mutation in the form of element references. The documentation again warns:

Only use an element reference to mutate the contents of an empty element that doesn't interact with Blazor. This scenario is useful when a third-party API supplies content to the element. Because Blazor doesn't interact with the element, there's no possibility of a conflict between Blazor's representation of the element and the Document Object Model (DOM).

Heeding that warning, you should probably write something like below (not tested). In the component file (.razor):

Add a carriage return with /n between image and text.

Thanks to @Casimir et Hippolyte for their comment, I was able to solve this using a while loop and the count parameter like they said.

The basic regex strings don't work because I would like to use values in the tags like [color=red] or [img width=""].

Here is the finalized code. It isn't perfect but it works.

You can use the following PHP code:

A regex approach in one pass:

1. construct an array which associates a bbcode tag with the corresponding html code.
2. write a pattern able to match nested (or not) quote bbcode tags. The interest will be double, because it will allow to extract only valid parts (that are balanced), to then proceed to the replacement.
3. proceed to a simple replacement with strtr inside a callback function using the associative array.

Pro: this is relatively fast since it needs only one pass and because of the use of strtr.
Cons: It isn't flexible because it will take in account only tags like [quote] and not [quote param="bidule"] or [QUOTE]. (however nothing forbids to write a more elaborated callback function and to change the pattern a little).

you can replace the function with a string, and use $1 for the first captured group:

A minor change in the original regex will solve your problem. Here is the original regex:

Regular Expressions will help you

One approach uses a regex pattern alternation which first tries to find Hello in [code] tags, then afterwards tries to find Hello in some other context. We use a regex callback function to selectively replace only the latter with the text Hi.