1

Can i use regex? if yes, how do i replace every match with a span tag? if no what can i use? a dictionary with all possible html tags? This is for solely educational purposes so please don't refer me to a JavaScript library.

user2426607
  • 29
  • 1
  • 5
  • 1
    If you don't want a library, what do you want? If it's for educational purposes, it sounds like you should start writing code. – Jonathon Reinhart Dec 03 '13 at 00:47
  • I'd just use Google's [**prettifier**](https://code.google.com/p/google-code-prettify/) – adeneo Dec 03 '13 at 00:48
  • I want an idea of where to start – user2426607 Dec 03 '13 at 00:48
  • I'd start by learning JavaScript regular expressions, by looking for examples / tutorials. Then I'd start writing your syntax highlighter. – Jonathon Reinhart Dec 03 '13 at 00:50
  • @JonathonReinhart While the question is technically fit for close votes, I think it might be worth keeping, as this information doesn't seem easy to find. Is it really done with regex? I'd probably have chosen dom reference if I had to guess. – m59 Dec 03 '13 at 00:51
  • possible duplicate of [RegEx match open tags except XHTML self-contained tags](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) – Greg Hewgill Dec 03 '13 at 00:51
  • I can do some simple regex but how do you replace every regex match with a span tag? – user2426607 Dec 03 '13 at 00:51
  • Why not refer you to a library? They've already done that, and there's no better education than reading well-written, working code. – Amadan Dec 03 '13 at 00:52
  • @user2426607 There are [thousands of answers](http://www.google.com/search?q=javascript+regex+replace) to that. – Jonathon Reinhart Dec 03 '13 at 00:53

1 Answers1

0

It's similar to how you would do syntax highlighting in any other language. Typically, you would implement a tokenizer which breaks the html snippet into individual tokens (e.g. using regular expressions), and then you would apply styling rules to the tokens.

I would look at Prism. Its code is pretty simple. The core is here:

https://github.com/LeaVerou/prism/blob/gh-pages/components/prism-core.js

This contains the tokenization and highlighting functions. The regular expressions for HTML/XML are in this file:

https://github.com/LeaVerou/prism/blob/gh-pages/components/prism-markup.js

sbking
  • 7,630
  • 24
  • 33