Change .text() content and keep child html

Question

Can you tell me how to remove character @ from this span tag without changing all child html(s)?

$('button').click(function() {
  // ...
});

#name {
  background-color: #ccc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <span id="name">
    <a href="#">Harry</a>
  </span> 
  
  says: Hello @<span id="name">
    <a href="#">Hermione</a>
  </span>
</span><br />

<button>Remove</button>

My idea: get the parent .text(), split character @, override parent text (parent.text('')) and append 2 parts to the parent. But this way has a big problem: all child html(s) wouldn't be kept.

Aside :: You can't have duplicated ID's ... ID must be unique — DaniP, Jul 25 '16 at 15:18
http://stackoverflow.com/questions/4106809/how-can-i-change-an-elements-text-without-changing-its-child-elements — lintu, Jul 25 '16 at 15:20

score 2 · Accepted Answer · answered Jul 25 '16 at 15:18

2

I've added an id to the outer <span> and deduplicated your name ids.

$('button').click(function () {

  $('#outer').html($('#outer').html().replace(/@/,''));
  
});

#name {
  background-color: #ccc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='outer'><span id="name"><a href="#">Harry</a></span> says: Hello @<span id="name2"><a href="#">Hermione</a></span></span>

<br />

<button>Remove</button>

answered Jul 25 '16 at 15:18

Chris Lear

6,592
1
18
26

The answers at http://stackoverflow.com/questions/4106809/how-can-i-change-an-elements-text-without-changing-its-child-elements are probably better – Chris Lear Jul 25 '16 at 15:22
I'm sorry, can I expand my question? Example: If in the span tag, I have more than 1 character `@`, and I only want to remove one of them (previous the user name). How can I do that? – Tân Jul 25 '16 at 15:24
Maybe edit the question to show the expanded example. And also explain how you would tell the difference between an @ before a user name and another @. There's probably a regex for it, if you can actually describe the difference clearly. – Chris Lear Jul 25 '16 at 15:29
I forget that I can use regex to detect `@` + `username` and `@` + (not) + `username`. Many thanks! – Tân Jul 25 '16 at 15:36

score 2 · Answer 2 · answered Jul 25 '16 at 15:23

2

Firstly you should change the duplicate id attributes to classes, or remove them entirely.

To solve your actual issue you can loop through the nodes held within the top level span and remove any @ characters which appear in any textNode values. Try this:

$('button').click(function() {
  $('body > span').contents().each(function() {
    if (this.nodeType == 3) {
      this.nodeValue = this.nodeValue.replace('@', '');
    }
  });
});

#name {
  background-color: #ccc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <span class="name">
    <a href="#">Harry</a>
  </span> says: Hello @<span class="name">
    <a href="#">Hermione</a>
  </span>
</span>
<br />

<button>Remove</button>

answered Jul 25 '16 at 15:23

Rory McCrossan

331,213
40
305
339

Thank you! A small question: how do I know the `this.nodeType` is 3? – Tân Jul 25 '16 at 15:30
1

Here you go: https://developer.mozilla.org/en/docs/Web/API/Node/nodeType You could replace `3` with `Node.TEXT_NODE`, however it may not be supported in older browsers. – Rory McCrossan Jul 25 '16 at 15:31
... Im looking for something like `var nodeType = ...; if (this.nodeType == nodeType) {}`. Thanks for the link – Tân Jul 25 '16 at 15:33

Change .text() content and keep child html

2 Answers2