javascript - 更改 .text() 内容并保留子 html

Question

你能告诉我如何在不更改所有子 html 的情况下从这个 span 标签中删除字符 @ 吗？

$('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>

我的思路:获取父级.text()，拆分字符@，覆盖父级文本(parent.text('') ) 并将 2 个部分附加到父级。但是这种方式有一个大问题:不会保留所有子 html。

Answer 1

我在外部 <span> 添加了一个 id并对您的姓名 ID 进行重复数据删除。

$('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>