Exercism v3 launches on Sept 1st 2021. Learn more! ๐Ÿš€๐Ÿš€๐Ÿš€
Avatar of jsteinshouer

jsteinshouer's solution

to Markdown in the CFML Track

Published at Jul 13 2018 · 0 comments
Instructions
Test suite
Solution

Refactor a Markdown parser.

The markdown exercise is a refactoring exercise. There is code that parses a given string with Markdown syntax and returns the associated HTML for that string. Even though this code is confusingly written and hard to follow, somehow it works and all the tests are passing! Your challenge is to re-write this code to make it easier to read and maintain while still making sure that all the tests keep passing.

It would be helpful if you made notes of what you did in your refactoring in comments so reviewers can see that, but it isn't strictly necessary. The most important thing is to make the code better!


To run the code in this exercise, you will only need to have CommandBox CLI installed. This binary runs CFML code from the command line.

To run the tests, cd into the exercise folder and run the following:

box task run TestRunner
# Or start up a test watcher that will rerun when files change
box task run TestRunner --:watcher

The tests leverage a library called TestBox which supports xUnit and BDD style of testing. All test suites will be written in the BDD style which uses closures to define test specs. You won't need to worry about installing TestBox. The CLI test runner will take care of that for you. You just need to be connected to the internet the first time you run it. You can read more about it here:

https://testbox.ortusbooks.com/content/

Submitting Incomplete Solutions

It's possible to submit an incomplete solution so you can see how others have completed the exercise.

MarkdownTest.cfc

component extends="testbox.system.BaseSpec" {

	function beforeAll(){
	  SUT = createObject( 'Markdown' );
	}

	function run(){
	
		describe( "My Markdown class", function(){			

			it( 'parses normal text as a paragraph', function(){
				expect( SUT.parse( markdown='This will be a paragraph' ) ).toBe( '<p>This will be a paragraph</p>' );
			});

			it( 'parsing italics', function(){
				expect( SUT.parse( markdown='_This will be italic_' ) ).toBe( '<p><em>This will be italic</em></p>' );
			});

			it( 'parsing bold text', function(){
				expect( SUT.parse( markdown='__This will be bold__' ) ).toBe( '<p><strong>This will be bold</strong></p>' );
			});

			it( 'mixed normal, italics and bold text', function(){
				expect( SUT.parse( markdown='This will _be_ __mixed__' ) ).toBe( '<p>This will <em>be</em> <strong>mixed</strong></p>' );
			});

			it( 'with h1 header level', function(){
				expect( SUT.parse( markdown='## This will be an h1' ) ).toBe( '<h1>This will be an h1</h1>' );
			});

			it( 'with h2 header level', function(){
				expect( SUT.parse( markdown='#### This will be an h2' ) ).toBe( '<h2>This will be an h2</h2>' );
			});

			it( 'with h6 header level', function(){
				expect( SUT.parse( markdown='############ This will be an h6' ) ).toBe( '<h6>This will be an h6</h6>' );
			});

			it( 'unordered lists', function(){
				expect( SUT.parse( markdown='* Item 1#chr( 10 )#* Item 2' ) ).toBe( '<ul><li>Item 1</li><li>Item 2</li></ul>' );
			});

			it( 'With a little bit of everything', function(){
				expect( SUT.parse( markdown='## Header!#chr( 10 )#* __Bold Item__#chr( 10 )#* _Italic Item_' ) ).toBe( '<h1>Header!</h1><ul><li><strong>Bold Item</strong></li><li><em>Italic Item</em></li></ul>' );
			});

		});
		
	}
 
}

SolutionTest.cfc

component extends="MarkdownTest" {

	function beforeAll(){
	  SUT = createObject( 'Solution' );
	}

}
/**
* Here is an example solution for the Markdown exercise
*/
component {

	/**
	* Parse markdown
	* 
	* @input.hint markdown to parse
	*/
	public string function parse(required string input) {
		
		var lines = listToArray( arguments.input, chr( 10 ) );
		var output = [];

		var isInList = false;

		for (var line in lines) {
			line = parseHeader(line);

			matches = reMatchNoCase( "\*(.*)", line);
			if ( matches.len() ) {
				if ( !isInList ) {
					isInList = true;

					matches[1] = parseBold( matches[1] );
					matches[1] = parseItalic( matches[1] );					

					if ( isItalic( matches[1] ) || isBold( matches[1] ) ) {
						line = "<ul><li>" & trim( replace( matches[1], "*", "", "all" ) ) & "</li>";
					} 
					else {
						line = "<ul><li><p>" & trim( replace( matches[1], "*", "", "all" ) ) & "</p></li>";
					}

				} 
				else {
					
					matches[1] = parseBold( matches[1] );
					matches[1] = parseItalic( matches[1] );

					if ( isItalic( matches[1] ) || isBold(matches[1]) ) {
						line = "<li>" & trim( replace( matches[1], "*", "", "all" ) ) & "</li>";
					} 
					else {
						line = "<li><p>" & trim( replace( matches[1], "*", "", "all" ) ) & "</p></li>";
					}
				}
			} 
			else {
				if ( isInList ) {
					line = "</ul>" & line;
					isInList = false;
				}
			}

			if ( !reMatchNoCase( "<h|<ul|<p|<li", line ).len() ) {
				line = "<p>#line#</p>";
			}

			line = parseBold( line );
			line = parseItalic( line );
			
			output.append(line);
		}
		var html = arrayToList( output, "" );
		if ( isInList ) {
			html &= "</ul>";
		}

		return html;

	}	

	/**
	*
	* Parse  html headers from markdown text
	*
	* @markdown.hint Markdown text to parse
	*
	*/
	private string function parseHeader( required string markdown ) {
		var output = arguments.markdown;
		/* Match on # signs for header */
		var matches = reMatchNoCase( "^[##]+(.*)", markdown);
		
		/* Replace with header tag or return original text if no match */
		if ( matches.len() ) {
			/* Get the header level by counting the number of # */
			var headerLevelContent = reMatchNoCase( "[##]+", matches[1])[1];
			var headerLevel = headerLevelContent.len();
			
			output = "<h#headerLevel#>" & trim( replace( matches[1], headerLevelContent, "" ) ) & "</h#headerLevel#>";
		}
		
		return output;
	}

	/**
	*
	* Parse bold text from markdown
	*
	* @markdown.hint Markdown text to parse
	*
	*/
	private string function parseBold( required string markdown ) {
		var output = arguments.markdown;
		var matches = findRegexMatches( "(.*)__(.*)__(.*)", arguments.markdown );
		if ( matches.len() ) {
			output = matches[2] & "<strong>" & matches[3] & "</strong>" & matches[4];
		}

		return output;
	}

	/**
	*
	* Parse bold text from markdown
	*
	* @markdown.hint Markdown text to parse
	*
	*/
	private string function parseItalic( required string markdown ) {
		var output = arguments.markdown;
		var matches = findRegexMatches( "(.*)_(.*)_(.*)", arguments.markdown );
		if ( matches.len() ) {
			output = matches[2] & "<em>" & matches[3] & "</em>" & matches[4];
		}

		return output;
	}

	/**
	*
	* Check if string contains <strong> 
	*
	* @content.hint String with content to check
	*
	*/
	private boolean function isBold( required string content ) {

		return (findNoCase("<strong>", arguments.content) > 0);
	}

	/**
	*
	* Check if string contains <em> 
	*
	* @content.hint String with content to check
	*
	*/
	private boolean function isItalic( required string content ) {

		return (findNoCase("<em>", arguments.content) > 0);
	}
	

	/**
	*
	* Utility method to return text from regular expression cature groups in an array because reFindNoCase just returns the position and length within the string
	*
	* @regex.hint Regular expression to match on
	* @content.hint Content to search
	* 
	*/
	private array function findRegexMatches(
		required string regex, 
		required string content
	) {
		var results = [];
		/* Get the CFML structure of matches */
		var matches = reFindNoCase( arguments.regex, arguments.content, 0, true  );
		if ( matches.len[1] ) {
			/* Add each match to the array */
			for ( var i = 1; i <= arrayLen(matches.len); i = i + 1 ) {
			    results.append( mid( arguments.content, matches.pos[i], matches.len[i] ) );
			}
		}
		
		return results;
	}
	
}

Community comments

Find this solution interesting? Ask the author a question to learn more.

What can you learn from this solution?

A huge amount can be learned from reading other peopleโ€™s code. This is why we wanted to give exercism users the option of making their solutions public.

Here are some questions to help you reflect on this solution and learn the most from it.

  • What compromises have been made?
  • Are there new concepts here that you could read more about to improve your understanding?