generalize svgTextUtils.plainText

- so that it can selective allow some pseudo-html tags
  to go through
- add truncate logic where allowed pseudo-html tags
  don't count toward the output "length"

Author: etpinard

src/lib/svg_text_utils.js

@@ -264,8 +264,6 @@ var ZERO_WIDTH_SPACE = '\u200b';
  */
 var PROTOCOLS = ['http:', 'https:', 'mailto:', '', undefined, ':'];
 
-var STRIP_TAGS = new RegExp('</?(' + Object.keys(TAG_STYLES).join('|') + ')( [^>]*)?/?>', 'g');
-
 var NEWLINES = /(\r\n?|\n)/g;
 
 var SPLIT_TAGS = /(<[^<>]*>)/;
@@ -315,10 +313,66 @@ function getQuotedMatch(_str, re) {
 
 var COLORMATCH = /(^|;)\s*color:/;
 
-exports.plainText = function(_str) {
-    // strip out our pseudo-html so we have a readable
-    // version to put into text fields
-    return (_str || '').replace(STRIP_TAGS, ' ');
+/**
+ * Strip string of tags
+ *
+ * @param {string} _str : input string
+ * @param {object} opts :
+ * - maxLen {number} max length of output string
+ * - allowedTags {array} list of pseudo-html tags to NOT strip
+ * @return {string}
+ */
+exports.plainText = function(_str, opts) {
+    opts = opts || {};
+
+    var len = (opts.len !== undefined && opts.len !== -1) ? opts.len : Infinity;
+    var allowedTags = opts.allowedTags !== undefined ? opts.allowedTags : ['br'];
+
+    var ellipsis = '...';
+    var eLen = ellipsis.length;
+
+    var oldParts = _str.split(SPLIT_TAGS);
+    var newParts = [];
+    var prevTag = '';
+    var l = 0;
+
+    for(var i = 0; i < oldParts.length; i++) {
+        var p = oldParts[i];
+        var match = p.match(ONE_TAG);
+        var tagType = match && match[2].toLowerCase();
+
+        if(tagType) {
+            // N.B. tags do not count towards string length
+            if(allowedTags.indexOf(tagType) !== -1) {
+                newParts.push(p);
+                prevTag = tagType;
+            }
+        } else {
+            var pLen = p.length;
+
+            if((l + pLen) < len) {
+                newParts.push(p);
+                l += pLen;
+            } else if(l < len) {
+                var pLen2 = len - l;
+
+                if(prevTag && (prevTag !== 'br' || pLen2 <= eLen || pLen <= eLen)) {
+                    newParts.pop();
+                }
+
+                if(len > eLen) {
+                    newParts.push(p.substr(0, pLen2 - eLen) + ellipsis);
+                } else {
+                    newParts.push(p.substr(0, pLen2));
+                }
+                break;
+            }
+
+            prevTag = '';
+        }
+    }
+
+    return newParts.join('');
 };
 
 /*

test/jasmine/tests/svg_text_utils_test.js

@@ -468,4 +468,41 @@ describe('svg+text utils', function() {
             expect(node.text()).toEqual('test\u200b5\u200bmore');
         });
     });
+
+    describe('plainText:', function() {
+        var fn = util.plainText;
+
+        it('should strip tags except <br> by default', function() {
+            expect(fn('a<b>b</b><br><sup>tm</sup>a')).toBe('ab<br>tma');
+        });
+
+        it('should work in various cases w/o <br>', function() {
+            var sIn = 'ThisIsDATA<sup>300</sup>';
+
+            expect(fn(sIn)).toBe('ThisIsDATA300');
+            expect(fn(sIn, {len: 3})).toBe('Thi');
+            expect(fn(sIn, {len: 4})).toBe('T...');
+            expect(fn(sIn, {len: 13})).toBe('ThisIsDATA...');
+            expect(fn(sIn, {len: 16})).toBe('ThisIsDATA300');
+            expect(fn(sIn, {allowedTags: ['sup']})).toBe('ThisIsDATA<sup>300</sup>');
+            expect(fn(sIn, {len: 13, allowedTags: ['sup']})).toBe('ThisIsDATA...');
+            expect(fn(sIn, {len: 16, allowedTags: ['sup']})).toBe('ThisIsDATA<sup>300</sup>');
+        });
+
+        it('should work in various cases w/ <br>', function() {
+            var sIn = 'ThisIs<br>DATA<sup>300</sup>';
+
+            expect(fn(sIn)).toBe('ThisIs<br>DATA300');
+            expect(fn(sIn, {len: 3})).toBe('Thi');
+            expect(fn(sIn, {len: 4})).toBe('T...');
+            expect(fn(sIn, {len: 7})).toBe('ThisIs...');
+            expect(fn(sIn, {len: 8})).toBe('ThisIs...');
+            expect(fn(sIn, {len: 9})).toBe('ThisIs...');
+            expect(fn(sIn, {len: 10})).toBe('ThisIs<br>D...');
+            expect(fn(sIn, {len: 13})).toBe('ThisIs<br>DATA...');
+            expect(fn(sIn, {len: 16})).toBe('ThisIs<br>DATA300');
+            expect(fn(sIn, {allowedTags: ['sup']})).toBe('ThisIsDATA<sup>300</sup>');
+            expect(fn(sIn, {allowedTags: ['br', 'sup']})).toBe('ThisIs<br>DATA<sup>300</sup>');
+        });
+    });
 });