diff --git a/readme.md b/readme.md index 445fbf5..bd0d5c1 100644 --- a/readme.md +++ b/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. `found text`). 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. diff --git a/src/findAndReplaceDOMText.js b/src/findAndReplaceDOMText.js index 556cc9a..c012586 100644 --- a/src/findAndReplaceDOMText.js +++ b/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 diff --git a/test/test.js b/test/test.js index cf91132..94e40bc 100644 --- a/test/test.js +++ b/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 = '
Test case
'; + findAndReplaceDOMText(d, { + find: 'case', + wrap: 'span', + wrapAttrs: { attr1: 'foo', attr2: 'bar' } + }); + htmlEqual(d.innerHTML, 'Test case
'); +}); + module('Replacement (with text)'); test('101', function() {