Adds wrapAttrs option

readme.md

@@ -81,6 +81,7 @@ The `options` object includes:
   * `$'` to represent everything to the right of the match.
  * **wrap** *optional* (`String | Node`): A string representing the node-name of an element that will be wrapped around matches (e.g. `span` or `em`). Or a Node (i.e. a stencil node) that we will clone for each match portion.
  * **wrapClass** *optional* (`String`): A string representing the class name to be assigned to the wrapping element (e.g. `<span class="myClass">found text</span>`).  If the `wrap` option is not specified, then this option is ignored.
+ * **wrapAttrs** *optional* (`Object`): A key/value pairs representing name and value of attributes to be assigned to the wrapping element. If the `wrap` option is not specified, then this option is ignored.
  * **portionMode** *optional* (`String`, one of `"retain"` or `"first"`): Indicates whether to re-use existing node boundaries when replacing a match with text (i.e. the default, `"retain"`), or whether to instead place the entire replacement in the first-found match portion's node. *Most of the time you'll want the default*.
  * **filterElements** *optional* (`Function`): A function to be called on every element encountered by `findAndReplaceDOMText`. If the function returns false the element will be altogether ignored.
  * **forceContext** *optional* (`Function | Boolean`): A boolean or a boolean-returning function that'll be called on every element to determine if it should be considered as its own matching context. See below under [*Contexts*](#user-content-contexts) for more info.
@@ -152,7 +153,7 @@ findAndReplaceDOMText(document.getElementById('container'), {
 
 #### The `wrap` Option
 
-If you pass a string to the `wrap` option, every matching text segment will be wrapped in that element.  If you also specify the `wrapClass` option, the wrapping element will be assigned that class after it is created.  This is useful for attaching various styles from your css.
+If you pass a string to the `wrap` option, every matching text segment will be wrapped in that element.  If you also specify the `wrapClass` or `wrapAttrs` option, the wrapping element will be assigned that class/attributes after it is created.  This is useful for attaching various styles from your css.
 
 E.g.
 

src/findAndReplaceDOMText.js

@@ -94,6 +94,7 @@
 	 * @param {RegExp} options.find The regular expression to match
 	 * @param {String|Element} [options.wrap] A NodeName, or a Node to clone
 	 * @param {String} [options.wrapClass] A classname to append to the wrapping element
+	 * @param {Object} [options.wrapAttr] An attributes key(name)/value mapping to the wrapping element
 	 * @param {String|Function} [options.replace='$&'] What to replace each match with
 	 * @param {Function} [options.filterElements] A Function to be called to check whether to
 	 *	process an element. (returning true = process element,
@@ -480,6 +481,7 @@
 			var replacement = this.options.replace || '$&';
 			var wrapper = this.options.wrap;
 			var wrapperClass = this.options.wrapClass;
+			var wrapperAttrs = this.options.wrapAttrs;
 
 			if (wrapper && wrapper.nodeType) {
 				// Wrapper has been provided as a stencil-node for us to clone:
@@ -502,6 +504,12 @@
 				el.className = wrapperClass;
 			}
 
+			if (el && wrapperAttrs) {
+				for (attr in wrapperAttrs) {
+					el.setAttribute(attr, wrapperAttrs[attr]);
+				}
+			}
+
 			replacement = doc.createTextNode(
 				this.prepareReplacementString(
 					replacement, portion, match

test/test.js

@@ -264,6 +264,17 @@ test('Custom replacement function - correct ordering', function() {
 	equal(nCalled, 3);
 });
 
+test('Replace with custom attributes', function () {
+	var d = document.createElement('div');
+	d.innerHTML = '<p>Test case</p>';
+	findAndReplaceDOMText(d, {
+		find: 'case',
+		wrap: 'span',
+		wrapAttrs: { attr1: 'foo', attr2: 'bar' }
+	});
+	htmlEqual(d.innerHTML, '<p>Test <span attr1="foo" attr2="bar">case</span></p>');
+});
+
 module('Replacement (with text)');
 
 test('101', function() {