PHP In HTML Attributes #1620

RiFi2k · 2019-01-15T07:26:32Z

Description

Formatting the HTML code in PHP files as it pertains to having inline PHP set in or as HTML attributes. I'll try to include pretty much every usecase or variation I have seen so far also whatever relevant examples that have been reported to me via my VSCode extension which formats the HTML code in PHP files.

I think this can pretty much be broken down into 3 high level sections:

Using an inline PHP tag to replace the HTML tag name and/or to replace 1 or more HTML attributes and their values.

// 1. Just the tag name.
<<?php html_element(); ?> attribute="value">

// 2. Tag name and attributes.
<<?php html_element(); ?> <?php language_attributes(); ?>>

// 3. These could also be echoed so you might see long or short syntax.
<<?php echo html_element(); ?> <?= language_attributes(); ?>>

// 4. Also with or without spaces on the short syntax.
<<?= html_element(); ?> <?=language_attributes();?>>

// 5. Random mix no space between attribute and PHP tag.
<html class="some classes"<?php language_attributes(); ?>>

// 6. Random mix w/ space.
<html class="some classes" <?php language_attributes(); ?>>

Using an inline PHP tag to replace the value of a HTML attribute.

// 7. Short echo.
<div>
    <input type="text" value="<?=$x["test"] . $x['test']?>">
</div>

// 8. Traditional echo.
<div>
    <input type="text" value="<?php echo $x["test"] . $x['test']?>">
</div>

More advanced / annoying / gotcha usecases

// 9. PHP ternary operator w/ super annoying syntax (people do write things like this if you troll WP plugins / themes, I stole this code more or less from one)
<div class="form-row" data-type="datepicker" data-name="<?php echo $public; ?>" <?php echo ( 'required' === $req ) ? ' data-validation="' . $validation . '"' : ''; ?>>
    <label for="<?php echo $public; ?>" class=col-form-label">
        <?php echo $label; ?>
        <?php echo ( 'required' === $req ) ? '<i class="fa fa-asterisk fa-xs text-danger" data-fa-transform="up-6"></i>' : ''; ?>
    </label>
    <div class="col col-lg-8 datepicker-group">
        <input id="dob_picker" name="<?php echo $public; ?>" type="text" class="form-control" readonly>
        <i class="fa fa-calendar-edit"></i>
    </div>
</div>

1. Just the tag name

Input

<<?php html_element(); ?> attribute="value">

Expected Output

<<?php html_element(); ?> attribute="value">

Actual Output

<<?php html_element();
    ?> attribute="value">

2. Tag name and attributes

Input

<<?php html_element(); ?> <?php language_attributes(); ?>>

Expected Output

<<?php html_element(); ?> <?php language_attributes(); ?>>

Actual Output

<<?php html_element();
    ?>
    <?php language_attributes(); ?>>

3. These could also be echoed so you might see long or short syntax

Input

<<?php echo html_element(); ?> <?= language_attributes(); ?>>

Expected Output

<<?php echo html_element(); ?> <?= language_attributes(); ?>>

Actual Output

<<?php echo
    html_element();
    ?>
    <?= language_attributes(); ?>>

4. Also with or without spaces on the short syntax

Input

<<?= html_element(); ?> <?=language_attributes();?>>

Expected Output

<<?= html_element(); ?> <?=language_attributes();?>>

Actual Output

<<?= html_element();
    ?>
    <?=language_attributes();?>>

5. Random mix no space between attribute and PHP tag

Input

<html class="some classes"<?php language_attributes(); ?>>

Expected Output

<html class="some classes"
    <?php language_attributes(); ?>>

Actual Output

<html class="some classes"
    <?php
    language_attributes();
    ?>>

6. Random mix w/ space

Input

<html <?php language_attributes(); ?> class="some classes">

Expected Output

<html <?php language_attributes(); ?>
    class="some classes">

Actual Output

<html <?php
    language_attributes();
    ?> class="some classes">

7. Short echo - This one is kind of cheap because most editors would throw some error or warning or at least mess up the syntax coloring on the document with this one.

Input

<div>
    <input type="text" value="<?=$x["test"] . $x['test']?>">
</div>

Expected Output

<div>
    <input type="text"
        value="<?=$x["test"] . $x['test']?>">
</div>

Actual Output

<div>
    <input type="text"
        value="<?=$x["
        test"]
        .
        $x['test']?>">
</div>

7A. Short echo - Swapping settings.

{
    "wrap_attributes": "auto"
}

Input

<div>
    <input type="text" value="<?=$x["test"] . $x['test']?>">
</div>

Expected Output

<div>
    <input type="text" value="<?=$x["test"] . $x['test']?>">
</div>

Actual Output

<div>
    <input type="text" value="<?=$x[" test"] . $x['test']?>">
</div>

8. Traditional echo

Input

<div>
    <input type="text" value="<?php echo $x["test"] . $x['test']?>">
</div>

Expected Output

<div>
    <input type="text"
        value="<?php echo $x["test"] . $x['test']?>">
</div>

Actual Output

<div>
    <input type="text"
        value="<?php echo $x["
        test"]
        .
        $x['test']?>">
</div>

9. PHP ternary operator w/ super annoying syntax (people do write things like this if you troll WP plugins / themes, I stole this code more or less from one)

Input

<div class="form-row" data-type="somefield" data-name="<?php echo $name; ?>" <?php echo ( 'required' === $req ) ? ' data-validation="' . $validation . '"' : ''; ?>>
    <label for="<?php echo $name; ?>" class=col-form-label">
        <?php echo $label; ?>
        <?php echo ( 'required' === $req ) ? '<i class="fa fa-asterisk fa-xs text-danger" data-fa-transform="up-6"></i>' : ''; ?>
    </label>
</div>

Expected Output

<div class="form-row"
    data-type="somefield"
    data-name="<?php echo $name; ?>"
    <?php echo ( 'required' === $req ) ? ' data-validation="' . $validation . '"' : ''; ?>>
    <label for="<?php echo $name; ?>"
        class=col-form-label">
        <?php echo $label; ?>
        <?php echo ( 'required' === $req ) ? '<i class="fa fa-asterisk fa-xs text-danger" data-fa-transform="up-6"></i>' : ''; ?>
    </label>
</div>

Actual Output

<div class="form-row"
    data-type="somefield"
    data-name="<?php echo $name; ?>"
    <?php
    echo
    ( 'required'===$req
    )
    ? ' data-validation="'
    .
    $validation
    . '"'
    : ''
    ;
    ?>>
    <label for="<?php echo $name; ?>"
        class=col-form-label">
        <?php echo $label; ?>
        <?php echo ( 'required' === $req ) ? '<i class="fa fa-asterisk fa-xs text-danger" data-fa-transform="up-6"></i>' : ''; ?>
    </label>
</div>

Environments

https://beautifier.io & JS API

Settings

Relevant Setting:

{
    "indent_size": "4",
    "indent_char": " ",
    "wrap_line_length": "0",
    "wrap_attributes": "force"
}

On examples 7, 7a, 8 the ones that get messed up because there are double-quotes inside the PHP tags and when beautified odviously the first instance of the double-quotes inside the attribute gets mistaken for another attribute thus the space is added in "auto" mode. My quick fix in my extension on that, because I'm guessing it may fall outside the scope of what your willing to fix. Is going to be something like this.

phpInAttr.js

export function phpInAttr(html) {
  const regex = /[a-zA-Z_:-]+?\s*?="(\s*?<[?](?:php|=)\s*?.*?".*?\s*?[?]>\s*?)"/gm;
  const result = html.replace(regex, (match, g1, g2) => {
    const g2r = g2.replace('"', "'");
    return `${g1}="${g2r}"`;
  });
  return result;
}

extension.js

let html = vscode.window.activeTextEditor.document.getText();
html = phpInAttr(html);
return beautifyHtml(html, options);

Basically locate any html attribute setup like attribute="$code" where $code contains any " then replace them all with ', don't know though that could potentionally be dangerous and break some PHP code in some cases.

The text was updated successfully, but these errors were encountered:

bitwiseman · 2019-01-15T19:14:12Z

@RiFi2k
Thanks for this detailed bug report.
I suspect this may turn into follow on bugs or sub-bugs to show progress.
Please for the love of all that is right and good do not try to patch this with a regex.
I have an idea that I believe will address most of these cases and it shouldn't be hard to implement.

RiFi2k · 2019-01-15T19:27:59Z

@bitwiseman Haha, I wasn't planning on parsing the HTML or anything nutty with a regex, just changing double quotes to single or the reverse.

But I will most certainly defer to your plan, I'm not in a rush to patch anything none of it is show stopping.

If you have any related tasks you wanted to lay off all you got to do is ask I'm more than happy to help, your always right on everything and I appreciate you!

bitwiseman · 2019-01-17T09:03:38Z

@RiFi2k Take a look at 1.9.0-beta2 now up on https://beautifier.io .

RiFi2k · 2019-01-17T09:13:21Z

@bitwiseman You notice that the force wrap doesn't work anymore too?

RiFi2k · 2019-01-17T09:15:10Z

Apart from that it was working out great, and it would wrap if it hit the line length, just wouldn't auto wrap after the first.

You put in some serious work on this.

bitwiseman · 2019-01-17T09:16:58Z

@RiFi2k
Not forcing: Could you give a sample input output (or just point to one of the ones above)?

RiFi2k · 2019-01-17T09:17:56Z

@bitwiseman So it's late haha, I wrote auto instead of force in the options.

Working as expected so far.

RiFi2k · 2019-01-17T09:22:03Z

You are truely the man, can't believe you got # 9 fully working in my examples.

bitwiseman added language: html type: bug language: templating labels Jan 15, 2019

bitwiseman closed this as completed Jan 17, 2019

bitwiseman added this to the v1.8.x milestone Jan 17, 2019

bitwiseman reopened this Jan 17, 2019

RiFi2k mentioned this issue Jan 17, 2019

wrong php array formatting in html code RiFi2k/format-html-in-php#14

Closed

bitwiseman closed this as completed Jan 17, 2019

bitwiseman modified the milestones: v1.9.x, v1.9.0 Feb 27, 2019

snyk-bot mentioned this issue Jan 13, 2020

[Snyk] Upgrade js-beautify from 1.6.14 to 1.10.2 fisker/fisker-sublimetext-backup#4

Closed

snyk-bot mentioned this issue Apr 7, 2020

[Snyk] Upgrade js-beautify from 1.7.5 to 1.10.3 rangle/discount-patternlab#2

Open

elitan mentioned this issue Sep 19, 2020

PHP inside <script> breaking RiFi2k/format-html-in-php#46

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PHP In HTML Attributes #1620

PHP In HTML Attributes #1620

RiFi2k commented Jan 15, 2019 •

edited

Loading

bitwiseman commented Jan 15, 2019

RiFi2k commented Jan 15, 2019

bitwiseman commented Jan 17, 2019

RiFi2k commented Jan 17, 2019

RiFi2k commented Jan 17, 2019

bitwiseman commented Jan 17, 2019

RiFi2k commented Jan 17, 2019 •

edited

Loading

RiFi2k commented Jan 17, 2019 •

edited

Loading

PHP In HTML Attributes #1620

PHP In HTML Attributes #1620

Comments

RiFi2k commented Jan 15, 2019 • edited Loading

Description

1. Just the tag name

Input

Expected Output

Actual Output

2. Tag name and attributes

Input

Expected Output

Actual Output

3. These could also be echoed so you might see long or short syntax

Input

Expected Output

Actual Output

4. Also with or without spaces on the short syntax

Input

Expected Output

Actual Output

5. Random mix no space between attribute and PHP tag

Input

Expected Output

Actual Output

6. Random mix w/ space

Input

Expected Output

Actual Output

7. Short echo - This one is kind of cheap because most editors would throw some error or warning or at least mess up the syntax coloring on the document with this one.

Input

Expected Output

Actual Output

7A. Short echo - Swapping settings.

Input

Expected Output

Actual Output

8. Traditional echo

Input

Expected Output

Actual Output

9. PHP ternary operator w/ super annoying syntax (people do write things like this if you troll WP plugins / themes, I stole this code more or less from one)

Input

Expected Output

Actual Output

Environments

Settings

bitwiseman commented Jan 15, 2019

RiFi2k commented Jan 15, 2019

bitwiseman commented Jan 17, 2019

RiFi2k commented Jan 17, 2019

RiFi2k commented Jan 17, 2019

bitwiseman commented Jan 17, 2019

RiFi2k commented Jan 17, 2019 • edited Loading

RiFi2k commented Jan 17, 2019 • edited Loading

RiFi2k commented Jan 15, 2019 •

edited

Loading

RiFi2k commented Jan 17, 2019 •

edited

Loading

RiFi2k commented Jan 17, 2019 •

edited

Loading