findAndReplaceDOMText

findAndReplaceDOMText copied to clipboard

Repro

• append <textarea>lorem ipsum</textarea> to the demo contents
• then search for lorem

Expect

• lorem in the text area to by styled

Actual

• lorem in the text area vanishes

This is probably a legit issue, but I'm not sure how it should be fixed, or what the desirable behaviour is. Textarea inner-text (its value) is not interpreted as HTML so there's no actual way to style 'lorem' in your case (e.g. you could not wrap it in a custom <span> for example).

The correct behaviour is probably to entirely ignore anything within a <textarea> OR to allow replacement but with the knowledge that it'll only be able to replace the found string with another string (so replacing 'lorum', in your example, with 'foo', would work).

at minimum the inner-text of the textarea shouldn't be modified. currently text that match in the textarea vanishes.

I agree.

FWIW, for now, you can use filterElements to avoid the textarea:

findAndReplaceDOMText(elementToSearchIn, {
  find: /lorem/,
  wrap: 'em',
  filterElements: function(node) {
    return node.nodeName.toLowerCase() !== 'textarea';
  }
});

Then there might be the issue of contenteditable textarea's (or contenteditable elements of any kind) which could reasonably allow the element wrapping...