Question

我想隐藏HTML div中的特定单词，而不会丢失javascript / jquery中的格式。这是我尝试过但它与风格/格式混淆。 HTML代码：

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="ctl00_ctl40_g_fa7fc6e0_693d_4dde_91fd_1dbe1d7d0e76_ctl00_ListForm2_formFiller_ctl02" 
class="summary">Count the number of texts:
<ul><li>Text 0</li>
<li>Text 1</li><li>Text 2</li>
<li>Text 3</li><li>Text 4</li>
<li>Text 5</li></ul>
</div>

JS代码：

$(function() {
   $('.summary').each(function() {
   var $this = $(this);
 $this.html($this.text().replace(/\bCount \bthe \bnumber \bof \btexts\b/g, '<b>Texts:</b>'));
});

});

我还创建了一个JSFiddle here。请先尝试不使用JS函数运行它，然后使用JS函数来理解我的样式/格式是什么意思。

Answer 1

这就是你想要的吗？

$(function() {
  $('.summary').each(function() {
   var $this = $(this);
  $this.html($this.html().replace(/\bCount \bthe \bnumber \bof \btexts\b/g, '<b>Texts:</b>'));
  });

});

您应该更换html而不是文本节点。 http://jsfiddle.net/sLa3dkdd/1/

Answer 2

您正在替换仅更改了文本内容的html，因此您保留文本但松散所有html元素。这样你就可以保留html：

$this.html($this.html().replace(/\bCount \bthe \bnumber \bof \btexts\b/g, '<b>Texts:</b>'));

更好的方法是替换文本节点内容：

$('.summary').contents().first()[0].textContent='Texts:';

隐藏HTML div中的特定单词而不会丢失样式/格式

2 个答案: