Fix parsing HTML/JSX tags to real elements (#2796)

* Fix parsing HTML/JSX tags to real elements

* Use `html-entities` to escape instead of pure `replace()`

* Remove unnecessary HTML entity replacing

Author: ccloli

packages/react-dev-utils/ansiHTML.js

@@ -10,6 +10,8 @@
 'use strict';
 
 var Anser = require('anser');
+var Entities = require('html-entities').AllHtmlEntities;
+var entities = new Entities();
 
 // Color scheme inspired by https://chriskempson.github.io/base16/css/base16-github.css
 // var base00 = 'ffffff'; // Default Background
@@ -61,7 +63,7 @@ var anserMap = {
 };
 
 function ansiHTML(txt) {
-  var arr = new Anser().ansiToJson(txt, {
+  var arr = new Anser().ansiToJson(entities.encode(txt), {
     use_classes: true,
   });
 

packages/react-dev-utils/webpackHotDevClient.js

@@ -22,9 +22,7 @@ var SockJS = require('sockjs-client');
 var stripAnsi = require('strip-ansi');
 var url = require('url');
 var formatWebpackMessages = require('./formatWebpackMessages');
-var Entities = require('html-entities').AllHtmlEntities;
 var ansiHTML = require('./ansiHTML');
-var entities = new Entities();
 
 function createOverlayIframe(onIframeLoad) {
   var iframe = document.createElement('iframe');
@@ -138,7 +136,7 @@ function showErrorOverlay(message) {
       'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' +
       'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' +
       '<code style="font-family: Consolas, Menlo, monospace;">' +
-      ansiHTML(entities.encode(message)) +
+      ansiHTML(message) +
       '</code></pre>' +
       '<div style="' +
       'font-family: sans-serif; color: rgb(135, 142, 145); margin-top: 0.5rem; ' +