diff --git a/src/languages/javascript.js b/src/languages/javascript.js
index 1375f885d9..4f4e2051f8 100644
--- a/src/languages/javascript.js
+++ b/src/languages/javascript.js
@@ -6,7 +6,8 @@ Website: https://developer.mozilla.org/en-US/docs/Web/JavaScript
 */
 
 function(hljs) {
-  var SELF_CLOSING_TAG = /<[A-Za-z0-9\\._:-]+\s*\/>/;
+  var TAG_START = /<[A-Za-z0-9\\._:-]+/;
+  var TAG_FINISH = /\/[A-Za-z0-9\\._:-]+>|\/>/;
   var IDENT_RE = '[A-Za-z$_][0-9A-Za-z$_]*';
   var KEYWORDS = {
     keyword:
@@ -189,18 +190,13 @@ function(hljs) {
             skip: true,
           },
           { // E4X / JSX
-            className: 'jsx',
-            begin: /<[A-Za-z0-9\\._:-]+/,
-            end: /\/[A-Za-z0-9\\._:-]+>|\/>/,
+            begin: TAG_START, end: TAG_FINISH,
             subLanguage: 'xml',
             contains: [
               {
-                begin: /<[A-Za-z0-9\\._:-]+/, end: /(\/[A-Za-z0-9\\._:-]+)>/, skip: true,
-                contains: [
-                  { begin: /<[A-Za-z0-9\\._:-]+\s*/, end: /\/>/, skip: true },
-                  'self'
-                ]
-              },
+                begin: TAG_START, end: TAG_FINISH, skip: true,
+                contains: ['self']
+              }
             ]
           }
         ],
diff --git a/test/markup/javascript/jsx.expect.txt b/test/markup/javascript/jsx.expect.txt
index 2a2fb84e23..a000fe75a7 100644
--- a/test/markup/javascript/jsx.expect.txt
+++ b/test/markup/javascript/jsx.expect.txt
@@ -3,5 +3,25 @@
 <span class="hljs-keyword">var</span> jsx = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">node</span>&gt;</span>...<span class="hljs-tag">&lt;<span class="hljs-name">child</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">child</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">node</span>&gt;</span></span>;
 <span class="hljs-keyword">var</span> jsx = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
 <span class="hljs-keyword">var</span> jsx = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">pre-node</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">child</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">pre-node</span>&gt;</span></span>;
+
 <span class="hljs-keyword">var</span> x = <span class="hljs-number">5</span>;
+
 <span class="hljs-keyword">return</span> (<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">node</span> <span class="hljs-attr">attr</span>=<span class="hljs-string">"value"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">node</span>&gt;</span></span>);
+
+<span class="hljs-keyword">const</span> n = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">X</span> /&gt;</span></span>
+<span class="hljs-keyword">const</span> m = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">X</span> <span class="hljs-attr">x</span>=<span class="hljs-string">""</span> /&gt;</span></span>
+
+<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
+  render() {
+    <span class="hljs-keyword">return</span> (
+      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">BrowserRouter</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
+          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">"/about"</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{About}</span> /&gt;</span>
+          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">"/contact"</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{Contact}</span> /&gt;</span>
+        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">BrowserRouter</span>&gt;</span></span>
+    );
+  }
+}
+
+<span class="hljs-keyword">var</span> x = <span class="hljs-number">5</span>;
diff --git a/test/markup/javascript/jsx.txt b/test/markup/javascript/jsx.txt
index 7d1042c153..a76ef8eecd 100644
--- a/test/markup/javascript/jsx.txt
+++ b/test/markup/javascript/jsx.txt
@@ -3,5 +3,25 @@ var jsx = <node><child/></node>;
 var jsx = <node>...<child>...</child></node>;
 var jsx = <div><span><br /></span></div>;
 var jsx = <pre-node><child /></pre-node>;
+
 var x = 5;
+
 return (<node attr="value"></node>);
+
+const n = () => <X />
+const m = () => <X x="" />
+
+class App extends Component {
+  render() {
+    return (
+      <BrowserRouter>
+        <div>
+          <Route path="/about" component={About} />
+          <Route path="/contact" component={Contact} />
+        </div>
+      </BrowserRouter>
+    );
+  }
+}
+
+var x = 5;