Replacing Text with RegEx and jQuery

Question

I have code that looks like so:

<li class="capture-details">
  Special Instructions
   <br>
<textarea id="catProdInstructions_6795606" class="productTextarea"></textarea>
</li>

Everything inside the li tag is generated by my CMS and I would like to remove the words Special Instructions but leave the code after this alone.

I tried this:

var text = $('.capture-details').text().replace(/Special Instructions/, 'Your Personalized Message');
$('.capture-details').text(text);

but this removed the textarea as well. I then tried:

$('.capture-details').prepend(text);

but that didn't remove the words Special Instructions .

How would I remove the words Special Instructions ?

Here is a fiddle of the above code.

Note: I could hard code the textarea into my JS but I want to avoid this because the textarea id and class may change but not the words Special Instructions .

Answer 1

You could just get the textNode and set it's value

$('.capture-details')[0].firstChild.nodeValue = 'Your Personalized Message'

FIDDLE

Answer 2

$(function() {
    var el = $('.capture-details');
    el.html(el.html().replace(/Special Instructions/, 'Your Personalized Message'));
});