Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PHP In HTML Attributes

See original GitHub issue

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.

Issue Analytics

State:
Created 5 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

RiFi2kcommented, Jan 17, 2019

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.

1reaction

bitwisemancommented, Jan 15, 2019

@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.

Top Results From Across the Web

What's the best practice to set html attribute via PHP?

You always want to HTML-encode things inside HTML attributes, which you can do with htmlspecialchars : <span title="<?php echo htmlspecialchars($variable); ...

Manual :: Working with HTML attributes. - PHP

Finally, HTML_Common2::getAttributes() method returns the values of all the instance's attributes. Those can be returned either as an associative array or a ...

PHP attributes() Function - W3Schools

The attributes() function returns the attributes and values of an XML element. Syntax. SimpleXMLElement::attributes(ns, prefix). Parameter Values. Parameter ...

Working with HTML attributes in PHP

The PHP DOMElement class contains methods that can be used to read, set, and remove attributes in a HTML document loaded into a...

How to use HTML attributes in PHP echo statement

While inserting HTML tags in between single/double quotations of PHP string, we need to be careful about assigning values to HTML attributes. If...

Troubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.

Start Free

Top Related Reddit Thread

No results found

Top Related Tweet

No results found

Top Related Dev.to Post

No results found

PHP In HTML Attributes

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

Issue Analytics

Top GitHub Comments

Top Results From Across the Web

Top Related Medium Post

Top Related StackOverflow Question

Troubleshoot Live Code

Top Related Reddit Thread

Top Related Hackernoon Post

Top Related Tweet

Top Related Dev.to Post

Top Related Hashnode Post

space_after_named_function not working inside an ES6 class

Add setting to keep HTML tag text content unformatted or ignore custom delimiters