+</span></code></pre><br><h2 id=debugging-and-visualization-tools>Debugging and Visualization tools<a aria-label="Anchor link for: debugging-and-visualization-tools" class=zola-anchor href=#debugging-and-visualization-tools>🔗</a></h2><p>As your regexp gets complicated, it can get difficult to debug when you run into issues. Building your regexp step by step from scratch and testing against input strings will go a long way in correcting the problem. To aid in such a process, you could use <a href="https://news.ycombinator.com/item?id=20614847">various online regexp tools</a>.<p><a href=https://regex101.com/r/HSeO0z/1>regex101</a> is a popular site to test your regexp. You'll have to first choose the flavor as JavaScript. Then you can add your regexp, input strings, choose flags and an optional replacement string. Matching portions will be highlighted and explanation is offered in separate panes. There's also a quick reference and other features like link sharing, code generator, quiz, cheatsheet, etc.<p align=center><img alt="regex101 example" src=/images/books/regex101.png><p>Another useful tool is <a href="https://jex.im/regulex/#!flags=&re=%5Cbpar(en%7Cro)%3Ft%5Cb">jex: regulex</a> which converts your regexp to a railroad diagram, thus providing a visual aid to understanding the pattern.<p align=center><img alt="regulex example" src=/images/books/regulex.png></p><br><h2 id=understanding-javascript-regexp-book>Understanding JavaScript RegExp book<a aria-label="Anchor link for: understanding-javascript-regexp-book" class=zola-anchor href=#understanding-javascript-regexp-book>🔗</a></h2><p>Visit my repo <a href=https://github.com/learnbyexample/learn_js_regexp>learn_js_regexp</a> for details about the book I wrote on JavaScript regular expressions. The ebook uses plenty of examples to explain the concepts from the basics and includes <a href=https://github.com/learnbyexample/learn_js_regexp/blob/master/Exercises.md>exercises</a> to test your understanding. The cheatsheet and examples presented in this post are based on the contents of this book.<p align=center><img alt="Understanding JavaScript RegExp cover image" height=360px loading=lazy src=https://raw.githubusercontent.com/learnbyexample/learn_js_regexp/master/images/js_regexp_ls.png width=640px></div><div class=post-footer><div class=post-tags><a href=https://learnbyexample.github.io/tags/javascript/>#javascript</a><a href=https://learnbyexample.github.io/tags/regular-expressions/>#regular-expressions</a><a href=https://learnbyexample.github.io/tags/cheatsheet/>#cheatsheet</a><a href=https://learnbyexample.github.io/tags/examples/>#examples</a></div><hr color=#e6e6e6><div class=post-nav><p><a class=previous href=https://learnbyexample.github.io/python-intermediate/>← I know Python basics, what next?</a><br><p><a class=next href=https://learnbyexample.github.io/python-regex-cheatsheet/>Python regular expression cheatsheet and examples →</a><br></div><hr color=#e6e6e6><p>📰 Use <a href=https://learnbyexample.github.io/atom.xml>this link</a> for the Atom feed. <br> ✅ Follow me on <a href=https://twitter.com/learn_byexample>Twitter</a>, <a href=https://github.com/learnbyexample>GitHub</a> and <a href=https://www.youtube.com/c/learnbyexample42>Youtube</a> for interesting tech nuggets. <br> 📧 Subscribe to <a href=https://learnbyexample.gumroad.com/l/learnbyexample-weekly>learnbyexample weekly</a> for programming resources, tips, tools, free ebooks and more (free newsletter, delivered every Friday).<hr color=#e6e6e6></div></article></div></main></div><script src=https://learnbyexample.github.io/even.js></script>
0 commit comments