Merge pull request #19 from vincurekf/strip-replace

Added stripReplace feature, can be used to remove defined string from text, to filter by custom regular expression or strip html tags from resul text

Author: Filippo Conti

README.md

@@ -37,6 +37,7 @@ and you are ready to go, add the directive to any element you want:
   * __render-html__: if set to true allow the text passed as input to be compiled and rendered
   * __edit-callback__: a callback that is called wherever the model value is changed
   * __is-editing__: optional argument that can be used to programatically enable/disable the editor
+  * __strip-replace__: optional argument that can be `true` to remove all HTML tags and line breaks, `string` to remove or custom regular `expression`, or array with `expression` to match with `replacement` to and `flags` use: `['expression','replacement','flags']`
 
 Note that, __edit-callback__ has two arguments, that you must specify in your template to use them:
  * __text__: the new text inside the element
@@ -81,6 +82,18 @@ With __focus-select__ all text content will be selected on element click or focu
 <span focus-select="true" ng-model="myModel" content-editable>Change me!</span>
 ```
 
+With __strip-replace__ attribute set as `boolean`:
+```html
+<!-- boolean: removes all HTML tags and line breaks -->
+<span focus-select="true" ng-model="myModel" strip-replace="true" content-editable>Change me!<br><b>I will become clear text without formating</b></span>
+```
+
+With __strip-replace__ attribute set as `array`:
+```html
+<!-- array: creates new RegExp() from array ['string / regular expression','replace with','expression flags'] -->
+<span focus-select="true" ng-model="myModel" strip-replace="[' ','-','gi']" content-editable>Change me!</span>
+```
+
 If you want to run a callback you must use __edit-callback__ attribute with a valid function and it will run every time the model value is __changed__.
 
 Since version __1.2.0__, after issue [#13](https://github.com/codekraft-studio/angular-content-editable/issues/13) you __MUST__ specify the arguments `text, elem` if you want to use them in your callback, like in this example.

dist/angular-content-editable.js

@@ -7,7 +7,7 @@ angular.module('angular-content-editable')
   var directive = {
     restrict: 'A',
     require: 'ngModel',
-    scope: { editCallback: '&?', isEditing: '=?' },
+    scope: { editCallback: '&?', isEditing: '=?', stripReplace: '=?' },
     link: _link
   };
 
@@ -21,7 +21,7 @@ angular.module('angular-content-editable')
       return;
     }
 
-    var noEscape = true, originalElement = elem[0], callback;
+    var noEscape = true, originalElement = elem[0], callback, stripReplace;
 
     // get default usage options
     var options = angular.copy(contentEditable);
@@ -36,6 +36,9 @@ angular.module('angular-content-editable')
     // Get the callback from item scope or global defined
     callback = scope.editCallback || options.editCallback;
 
+    // Get the strip tags option from item scope or global defined
+    stripReplace = scope.stripReplace || options.stripReplace;
+
     // add editable class
     attrs.$addClass(options.editableClass);
 
@@ -124,7 +127,25 @@ angular.module('angular-content-editable')
 
         // if element value is different from model value
         if( html != ngModel.$modelValue ) {
-
+          
+          // if user defined strip-replace variable
+          if( stripReplace ){
+            if( angular.isString(stripReplace) ) {
+              // if stripReplace is a string create new RegExp with gi (global, ignore case)
+              html = html.replace( new RegExp( stripReplace, 'g' ), '' );
+            }else if( angular.isArray(stripReplace) ){
+              // if stripReplace is an array create new RegExp from array values
+              // get values from array or set default
+              var e = stripReplace[0] || '', r = stripReplace[1] || '', f = stripReplace[2] || 'g';
+              html = html.replace( new RegExp( e, f ), r );
+            }else{
+              // if stripReplace is set to "true", remove all html tags and new line breaks
+              html = html.replace(/(<([^>]+)>)/ig, '').replace(/\r?\n|\r/g, '');
+            }
+            // update elem html value
+            elem.html(html);
+          }
+          
           /**
           * This method should be called
           * when a controller wants to
@@ -228,7 +249,8 @@ angular.module('angular-content-editable')
     singleLine: false,
     focusSelect: true, // default on focus select all text inside
     renderHtml: false,
-    editCallback: false
+    editCallback: false,
+    stripReplace: false
   }
 
   this.configure = function (options) {

dist/angular-content-editable.min.js

@@ -70,6 +70,12 @@ <h3 ng-model="viewStrings.pageTitle" single-line="true" focus-select="false" con
         <br>and you can make her doing all types of crazy things, like: <i>saving the data just changed with a ajax http request</i>, or <i>save the data in local storage</i> like in the example showed in this page
       </p>
 
+      <p ng-model="viewStrings.stripReplaceParagraph" focus-select="false" single-line="false" strip-replace="['html','<b>CHANGED to something else</b>','g']" content-editable>
+        If you specify array or simply "true" inside a <b>strip replace</b> attribute every time your model change,
+        <br>the text will be stripped of all html tags, in case of setting <b>strip replace</b> to "true".
+        <br>If you specify array, the array will be converted to regular expression and the text will be matched (and changed) to your parametters.
+      </p>
+      
     </section>
   </article>
 </body>

index.html

@@ -5,7 +5,7 @@ angular.module('angular-content-editable')
   var directive = {
     restrict: 'A',
     require: 'ngModel',
-    scope: { editCallback: '&?', isEditing: '=?' },
+    scope: { editCallback: '&?', isEditing: '=?', stripReplace: '=?' },
     link: _link
   };
 
@@ -19,7 +19,7 @@ angular.module('angular-content-editable')
       return;
     }
 
-    var noEscape = true, originalElement = elem[0], callback;
+    var noEscape = true, originalElement = elem[0], callback, stripReplace;
 
     // get default usage options
     var options = angular.copy(contentEditable);
@@ -34,6 +34,9 @@ angular.module('angular-content-editable')
     // Get the callback from item scope or global defined
     callback = scope.editCallback || options.editCallback;
 
+    // Get the strip tags option from item scope or global defined
+    stripReplace = scope.stripReplace || options.stripReplace;
+
     // add editable class
     attrs.$addClass(options.editableClass);
 
@@ -122,7 +125,25 @@ angular.module('angular-content-editable')
 
         // if element value is different from model value
         if( html != ngModel.$modelValue ) {
-
+          
+          // if user defined strip-replace variable
+          if( stripReplace ){
+            if( angular.isString(stripReplace) ) {
+              // if stripReplace is a string create new RegExp with gi (global, ignore case)
+              html = html.replace( new RegExp( stripReplace, 'g' ), '' );
+            }else if( angular.isArray(stripReplace) ){
+              // if stripReplace is an array create new RegExp from array values
+              // get values from array or set default
+              var e = stripReplace[0] || '', r = stripReplace[1] || '', f = stripReplace[2] || 'g';
+              html = html.replace( new RegExp( e, f ), r );
+            }else{
+              // if stripReplace is set to "true", remove all html tags and new line breaks
+              html = html.replace(/(<([^>]+)>)/ig, '').replace(/\r?\n|\r/g, '');
+            }
+            // update elem html value
+            elem.html(html);
+          }
+          
           /**
           * This method should be called
           * when a controller wants to

src/angular-content-editable.directive.js

@@ -12,7 +12,8 @@ angular.module('angular-content-editable')
     singleLine: false,
     focusSelect: true, // default on focus select all text inside
     renderHtml: false,
-    editCallback: false
+    editCallback: false,
+    stripReplace: false
   }
 
   this.configure = function (options) {

src/angular-content-editable.provider.js

@@ -52,4 +52,24 @@ describe("Angular Content Editable: Directive", function () {
     scope.$digest();
     expect(scope.isEditing).toBe(false);
   });
+  
+  it('should strip all html tags from text', function () {
+    element = angular.element('<h1 ng-model="myModel" edit-callback="onEdit(\'extraArg\', text, elem)" is-editing="isEditing" strip-replace="true" content-editable></h1>');
+    $compile(element)(scope);
+    scope.$digest();
+    element.triggerHandler('click');
+    element.html('Some random text <b>change</b>.');
+    element.triggerHandler('blur');
+    expect(element.html()).toContain("Some random text change.");
+  });
+  
+  it('should replace all matching strings', function () {
+    element = angular.element('<h1 ng-model="myModel" edit-callback="onEdit(\'extraArg\', text, elem)" is-editing="isEditing" strip-replace="[\'change\',\'success\',\'g\']" content-editable></h1>');
+    $compile(element)(scope);
+    scope.$digest();
+    element.triggerHandler('click');
+    element.html('Some random text change.');
+    element.triggerHandler('blur');
+    expect(element.html()).toContain("Some random text success.");
+  });
 });