php strip_tags regex for replacing single < with HTML entities

Question

I'm using strip_tags to make sure every HTML tag is removed before saving a string. Now I got the issue that also single < without any ending tags are removed. The idea is now to replace every single < with the matching HTML entity < I got a regex for this but it only replaces the first find, any idea how I can adjust this?

This is the regex I got for now: preg_replace("/<([^>]*(<|$))/", "&lt;$1", $string);

I want this:

<p> Hello < 30 </p> < < < <!-- Test --> &#60;> > > >

to become first this with preg_replace(REGEX, REPLACE, $string):

<p> Hello &#60; 30 </p> &#60; &#60; &#60; <!-- Test --> &#60;> > > >

and then this after strip_tags($string):

Hello < 30  < < <  <> > > >

Any idea how I can achive that?
Maybe you even know a better way.

Answer 1

Your question is interesting, and therefore I took the time to try and solve it. I think that the only way is to do it in several steps:

1. The first step would be to remove HTML comments.

2. The next step is to try and match all HTML tags with a regular expression in order to rewrite them into another form, replacing the < and > chars by something else, such as [[ and respectively ]].

3. After that, you can replace < by < and > by >.

4. We replace back our [[tag attr="value"]] and [[/tag]] by the original HTML tag <tag attr="value"> and </tag>.

5. We can now strip the HTML tags we want with strip_tags() or with a safer and more flexible library such as HTMLPurifier.

The PHP code

Sorry, but the color highlighting seems to bug due to my use of Nowdoc strings for editing ease :

<?php

define('LINE_LENGTH', 60);

// A regular expression to find HTML tags.
define('REGEX_HTML_TAG', <<<'END_OF_REGEX'
~
<(?!!--)                # Opening of a tag, but not for HTML comments.
(?<tagcontent>          # Capture the text between the "<" and ">" chars.
  \s*/?\s*              # Optional spaces, optional slash (for closing tags).
  (?<tagname>[a-z]+\b)  # The tag name.
  (?<attributes>        # The tag attributes. Handle a possible ">" in one of them.
    (?:
      (?<quote>["']).*?\k<quote>
      |                 # Or
      [^>]              # Any char not beeing ">"
    )*
  )
  \s*/?\s*              # For self-closing tags such as <img .../>.
)
>                       # Closing of a tag.
~isx
END_OF_REGEX);

// A regular expression to find double-bracketed tags.
define('REGEX_BRACKETED_TAG', <<<'END_OF_REGEX'
~
\[\[            # Opening of a bracketed tag.
(?<tagcontent>  # Capture the text between the brackets.
  .*?
)
\]\]            # Closing of a bracketed tag.
~xs
END_OF_REGEX);

$html = <<<'END_OF_HTML'
<p> Hello < 30 </p> < < < <!-- Test --> &#60;> > > >
<p><span class="icon icon-print">print</SPAN></p>

<LABEL for="firstname">First name:</LABEL>
<input required type="text" id="firstname" name="firstname" /><!-- with self-closing slash -->
<label for="age">Age:</label>
<INPut required type="number" id="age" name="age"><!-- without self-closing slash -->

Shit should not happen with malformed HTML --> <p id="paragraph-58">Isn't closed
Or something not opened </div>
Be carefull with ">" in tag attribute values (seems to be allowed unescaped):
<input type="password" pattern="(?!.*[><]).{8,}" name="password">
<abbr data-symbol=">" title="Greater than">gt</abbr>

<nav class="floating-nav">
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Test with spaces: <
textarea id="text"
         name="text"
         class="decorative"
>Some text< / textarea>
END_OF_HTML;

/**
 * Just to print a title or a step of the operations.
 *
 * @param string $text The text to print.
 * @param bool $is_a_step If set to false then no step counter will be printed
 *                        and incremented.
 * @return void
 */
function printTitle($text, $is_a_step = true) {
    static $counter = 1;
    if ($is_a_step) {
        print "\n\nSTEP $counter : $text\n";
        $counter++;
    } else {
        print "\n\n$text\n";
    }
    print str_repeat('=', LINE_LENGTH) . "\n\n";
}

printTitle('Input HTML:', false);
print $html;

printTitle('Strip out HTML comments');
$output = preg_replace('/<!--.*?-->/', '', $html);
print $output;

printTitle('replace all HTML tags by [[tag]]');
// preg_replace() doesn't support named groups but pre_replace_callback() does, so we'll use $1.
$output = preg_replace(REGEX_HTML_TAG, '[[$1]]', $output);
print $output;

printTitle('replace all < and > by &lt; and &gt;');
$output = htmlspecialchars($output, ENT_HTML5); // ENT_HTML5 will leave single and double quotes.
print $output;

printTitle('replace back [[tag]] by <tag>');
$output = preg_replace(REGEX_BRACKETED_TAG, '<$1>', $output);
print $output;

printTitle('Strip the HTML tags with strip_tags()');
$output = strip_tags($output);
print $output;

// It seems that the crapy strip_tags() doesn't always manage it's job!!!
// So let's see if we find some left HTML tags.
printTitle('Check what strip_tags() did');
if (preg_match_all(REGEX_HTML_TAG, $output, $matches, PREG_SET_ORDER)) {
    print "Oups! strip_tags() didn't clean up everything!\n";
    print "Found " . count($matches) . " occurrences:\n";
    foreach ($matches as $i => $match) {
        $indented_match = preg_replace('/\r?\n/', '$0  ', $match[0]);
        print '- match ' . ($i + 1) . " : $indented_match\n";
    }

    print "\n\nLet's try to do it ourselves, by replacing the matched tags by nothing.\n\n";
    $output = preg_replace(REGEX_HTML_TAG, '', $output);
    print $output;
}
else {
    print "Ok, no tag found.\n";
}

You can run it here: https://onlinephp.io/c/005a3

For the regular expression, I used ~ instead of the usual / to delimit the pattern and the flags. This is just because we then can use the slash without escaping it in the pattern.

I also used the x flag for the extended notation so that I can put some comments in my pattern and write it on several lines.

Just for readability and flexibility, I also used named capturing groups, such as (?<quote>) so that we don't have indexes, which could move if we add some other capturing groups. A backreference is done with \k<quote> instead of the indexed version \4.

HTML5 seems quite permissive as it seems that the > char can be put in an attribute value without replacing it by >. I suppose this wasn't allowed in the past and it become "ok/accepted" to help users write readable pattern attributes on <input> fields. I added an example of a password field where you are not allowed to use the < and > chars. This was to show how to handle it in the regular expression, by accepting an attribute with a single or double quoted value.

The output:

Input HTML:
============================================================

<p> Hello < 30 </p> < < < <!-- Test --> &#60;> > > >
<p><span class="icon icon-print">print</SPAN></p>

<LABEL for="firstname">First name:</LABEL>
<input required type="text" id="firstname" name="firstname" /><!-- with self-closing slash -->
<label for="age">Age:</label>
<INPut required type="number" id="age" name="age"><!-- without self-closing slash -->

Shit should not happen with malformed HTML --> <p id="paragraph-58">Isn't closed
Or something not opened </div>
Be carefull with ">" in tag attribute values (seems to be allowed unescaped):
<input type="password" pattern="(?!.*[><]).{8,}" name="password">
<abbr data-symbol=">" title="Greater than">gt</abbr>

<nav class="floating-nav">
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Test with spaces: <
textarea id="text"
         name="text"
         class="decorative"
>Some text< / textarea>

STEP 1 : Strip out HTML comments
============================================================

<p> Hello < 30 </p> < < <  &#60;> > > >
<p><span class="icon icon-print">print</SPAN></p>

<LABEL for="firstname">First name:</LABEL>
<input required type="text" id="firstname" name="firstname" />
<label for="age">Age:</label>
<INPut required type="number" id="age" name="age">

Shit should not happen with malformed HTML --> <p id="paragraph-58">Isn't closed
Or something not opened </div>
Be carefull with ">" in tag attribute values (seems to be allowed unescaped):
<input type="password" pattern="(?!.*[><]).{8,}" name="password">
<abbr data-symbol=">" title="Greater than">gt</abbr>

<nav class="floating-nav">
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Test with spaces: <
textarea id="text"
         name="text"
         class="decorative"
>Some text< / textarea>

STEP 2 : replace all HTML tags by [[tag]]
============================================================

[[p]] Hello < 30 [[/p]] < < <  &#60;> > > >
[[p]][[span class="icon icon-print"]]print[[/SPAN]][[/p]]

[[LABEL for="firstname"]]First name:[[/LABEL]]
[[input required type="text" id="firstname" name="firstname" /]]
[[label for="age"]]Age:[[/label]]
[[INPut required type="number" id="age" name="age"]]

Shit should not happen with malformed HTML --> [[p id="paragraph-58"]]Isn't closed
Or something not opened [[/div]]
Be carefull with ">" in tag attribute values (seems to be allowed unescaped):
[[input type="password" pattern="(?!.*[><]).{8,}" name="password"]]
[[abbr data-symbol=">" title="Greater than"]]gt[[/abbr]]

[[nav class="floating-nav"]]
  [[ul class="menu"]]
    [[li]][[a href="/"]]Home[[/a]][[/li]]
    [[li]][[a href="/contact"]]Contact[[/a]][[/li]]
  [[/ul]]
[[/nav]]

Test with spaces: [[
textarea id="text"
         name="text"
         class="decorative"
]]Some text[[ / textarea]]

STEP 3 : replace all < and > by &lt; and &gt;
============================================================

[[p]] Hello &lt; 30 [[/p]] &lt; &lt; &lt;  &amp;#60;&gt; &gt; &gt; &gt;
[[p]][[span class="icon icon-print"]]print[[/SPAN]][[/p]]

[[LABEL for="firstname"]]First name:[[/LABEL]]
[[input required type="text" id="firstname" name="firstname" /]]
[[label for="age"]]Age:[[/label]]
[[INPut required type="number" id="age" name="age"]]

Shit should not happen with malformed HTML --&gt; [[p id="paragraph-58"]]Isn't closed
Or something not opened [[/div]]
Be carefull with "&gt;" in tag attribute values (seems to be allowed unescaped):
[[input type="password" pattern="(?!.*[&gt;&lt;]).{8,}" name="password"]]
[[abbr data-symbol="&gt;" title="Greater than"]]gt[[/abbr]]

[[nav class="floating-nav"]]
  [[ul class="menu"]]
    [[li]][[a href="/"]]Home[[/a]][[/li]]
    [[li]][[a href="/contact"]]Contact[[/a]][[/li]]
  [[/ul]]
[[/nav]]

Test with spaces: [[
textarea id="text"
         name="text"
         class="decorative"
]]Some text[[ / textarea]]

STEP 4 : replace back [[tag]] by <tag>
============================================================

<p> Hello &lt; 30 </p> &lt; &lt; &lt;  &amp;#60;&gt; &gt; &gt; &gt;
<p><span class="icon icon-print">print</SPAN></p>

<LABEL for="firstname">First name:</LABEL>
<input required type="text" id="firstname" name="firstname" />
<label for="age">Age:</label>
<INPut required type="number" id="age" name="age">

Shit should not happen with malformed HTML --&gt; <p id="paragraph-58">Isn't closed
Or something not opened </div>
Be carefull with "&gt;" in tag attribute values (seems to be allowed unescaped):
<input type="password" pattern="(?!.*[&gt;&lt;]).{8,}" name="password">
<abbr data-symbol="&gt;" title="Greater than">gt</abbr>

<nav class="floating-nav">
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Test with spaces: <
textarea id="text"
         name="text"
         class="decorative"
>Some text< / textarea>

STEP 5 : Strip the HTML tags with strip_tags()
============================================================

 Hello &lt; 30  &lt; &lt; &lt;  &amp;#60;&gt; &gt; &gt; &gt;
print

First name:

Age:


Shit should not happen with malformed HTML --&gt; Isn't closed
Or something not opened 
Be carefull with "&gt;" in tag attribute values (seems to be allowed unescaped):

gt


  
    Home
    Contact
  


Test with spaces: <
textarea id="text"
         name="text"
         class="decorative"
>Some text< / textarea>

STEP 6 : Check what strip_tags() did
============================================================

Oups! strip_tags() didn't clean up everything!
Found 2 occurrences:
- match 1 : <
  textarea id="text"
           name="text"
           class="decorative"
  >
- match 2 : < / textarea>


Let's try to do it ourselves, by replacing the matched tags by nothing.

 Hello &lt; 30  &lt; &lt; &lt;  &amp;#60;&gt; &gt; &gt; &gt;
print

First name:

Age:


Shit should not happen with malformed HTML --&gt; Isn't closed
Or something not opened 
Be carefull with "&gt;" in tag attribute values (seems to be allowed unescaped):

gt


  
    Home
    Contact
  


Test with spaces: Some text

As you can see, strip_tags() isn't handling spaces around the tag name, which I found completely unsafe! This is why I would suggest using a library such as HTMLPurifier or a DOM parser.