diff --git a/src/ui/public/stringify/__tests__/_color.js b/src/ui/public/stringify/__tests__/_color.js
index 5ee7db61815e..883cbb56178f 100644
--- a/src/ui/public/stringify/__tests__/_color.js
+++ b/src/ui/public/stringify/__tests__/_color.js
@@ -72,7 +72,26 @@ describe('Color Format', function () {
expect(converter('AB', 'html')).to.eql(
'AB'
);
+
+ expect(converter('AB <', 'html')).to.eql(
+ 'AB <'
+ );
+
expect(converter('a', 'html')).to.eql('a');
});
+
+ it('returns original value (escaped) when regex is invalid', function () {
+ const colorer = new ColorFormat({
+ fieldType: 'string',
+ colors: [{
+ regex: 'A.*',
+ text: 'blue',
+ background: 'yellow'
+ }]
+ });
+
+ const converter = colorer.getConverterFor('html');
+ expect(converter('<', 'html')).to.eql('<');
+ });
});
});
diff --git a/src/ui/public/stringify/types/color.js b/src/ui/public/stringify/types/color.js
index b756e2ecd11b..dc8a9b11a437 100644
--- a/src/ui/public/stringify/types/color.js
+++ b/src/ui/public/stringify/types/color.js
@@ -71,7 +71,7 @@ export function stringifyColor(Private) {
_Color.prototype._convert = {
html(val) {
const color = this.findColorRuleForVal(val);
- if (!color) return _.asPrettyString(val);
+ if (!color) return _.escape(_.asPrettyString(val));
let style = '';
if (color.text) style += `color: ${color.text};`;