Output HTML with preg_replace_callback not in order

Question

I have the following HTML that's been returned from a function:

<fieldset>
    <legend>Title</legend>
    <div>
        <label>
            <i>String that gets translated</i>
        </label>
        <textarea>
            <i>Another string</i>
        </textarea>
    </div>
</fieldset>

Then I use preg_replace_callback to get the string between <i> tags and I replace it with a translated string, like below:

$translation = preg_replace_callback("/\<i\>(.+?)\<\/i\>/", 'translator', $html);

function translator($matches) {
    return __t($matches[1]);
}

However, when I output the html - echo $translation; - I get the following:

String that gets translated Another string<--this is not inside <i> tags
<fieldset>
    <legend>Title</legend>
    <div>
        <label>
            <i></i> <--the string should be placed here
        </label>
        <textarea>
            <i></i> <--and here
        </textarea>
    </div>
</fieldset>

This issue has been puzzling my head all day and I can't figure out a way to sort it out. How can I output the html and the translated string in the right order? Do I have to use DOMDocument::loadHTML, and if so how?

Answer 1

Use the output buffering functions.

ob_flush(); // flush any pending output buffer
ob_start();
$translation = preg_replace_callback("/\<i\>(.+?)\<\/i\>/", 'translator', $html);
ob_end_clean();

function translator($matches) {
    __t($matches[1]);
    return ob_get_clean();
}