Replace text in a tag leaving child tag intact

Question

I have a rather interesting issue. Content is being build dynamically and creating the following scenario.

<button id="something">
    <i class="fa fa-refresh"></i>
    Some button text
</button>

What I'm trying to do is replace "some button text" while preserving the Font Awesome tag. I've tried regex and so on, but kind of stuck.

As a note, I've tried .text() and it does replace the text, but also removes the i tag too.

[Don't parse HTML with regex](http://stackoverflow.com/a/1732454/2482744) — Alex Hall, Sep 25 '15 at 18:37

Pranav C Balan · Accepted Answer · 2015-09-25T18:43:52.933

0

You can use contents() for getting all descendant including textNode . Iterate over the result using each() and update the nodVealue

$('#something').contents().each(function() {
  if (this.nodeType === 3)
    this.nodeValue = $.trim(this.nodeValue).length ? 'new value' : '';
    // if you want to remove the element then use 'this.remove()'
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="something">
  <i class="fa fa-refresh"></i>
  Some button text
</button>

edited Sep 25 '15 at 18:43

answered Sep 25 '15 at 18:38

Pranav C Balan

113,687
23
165
188

Worked like a charm. Thank you. – probie Sep 25 '15 at 18:50
@probie : glad to help you :) – Pranav C Balan Sep 25 '15 at 18:52

Replace text in a tag leaving child tag intact

1 Answers1