beautifier/js-beautify

HTML format breaks when text contains un-encoded <

Open

#1,646 opened on Mar 22, 2019

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (8,342 stars) (1,460 forks)batch import
good first issuelanguage: htmltype: bug

Description

Input

The code looked like this before beautification:

<!doctype html>
<html>

<body>
  <div>
    <button id="test">test < test</button>
  </div>
</body>

</html>

Expected Output

The code should have looked like this after beautification:

<!doctype html>
<html>

	<body>
		<div>
			<button id="test">test %3C test</button>
		</div>
	</body>

</html>

or

<!doctype html>
<html>

	<body>
		<div>
			<button id="test">test < test</button>
		</div>
	</body>

</html>

Actual Output

The code actually looked like this after beautification:

<!doctype html>
<html>

	<body>
		<div>
			<button id="test">test < test</button> </div> </body> </html>

This is using 1.9.0 on the online testing site.

I would assume you could take care of encoding the < while parsing. I personally think it would be fine to return it back encoded, but I'm not sure what your feelings on that part are, or if you even want to support it at all. I got an issue on it so I figured I would run it up the chain.

As a side note to save you a couple minutes I tried and having > in the text works as expected.

Contributor guide

Tech stack
javascripthtml
Domain
tooling
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
needs investigation
Prerequisites
Basic HTMLFamiliarity with HTML entity encoding
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the HTML beautifier source code in the js beautify repo to understand how text content is handled. Look for where `<` characters are being parsed and determine if they should be encoded or left as is. Check the parser's behavior for text nodes inside tags. Review any existing tests related to HTML entities. Consider the maintainer's preference between the two proposed outputs.