在div中替换文本而不影响其中的任何HTML标记

我看到这已被问了很多次。但不幸的是，我还没有遇到一个简单的解决方案。大多数解决方案围绕着div内的多个节点。在div中替换文本而不影响其中的任何HTML标记

所以这里的问题。我有以下的标记：

<div class="test">Text1<span></span></div>

我需要“文本1”和“文本2”，而不影响连接到span标签跨度标签和事件处理程序进行更换。

做一些类似$('.test')html('Text2<span></span>')的确会替换文字。但是，删除span标签上的事件处理程序，这是不希望的。我正在寻找一种快速高效的方法。

来源

2012-04-09 John

您打算如何确定要替换的文字？文本总是在第一个标签之前？ – Brad 2012-04-09 19:21:40

并回应什么事件？ – 2012-04-09 19:28:09

更改标记（将元素中的文字包裹起来）是迄今为止最简单的解决方法。 – 2012-04-09 19:30:59

裹替换文本具有标签：

<div class="test"><span class="test-text">Text1</span><span></span></div>

来源

2012-04-09 19:23:26 iambriansreed

我想这是迄今为止最简单的解决方案。尽管它从未想过我。 Thx相同。 – John 2012-04-09 19:50:54

，如果你想补充的事件处理程序与.live或.on功能（取决于jQuery的版本）的.html（“文本2”）会工作得很好。

来源

2012-04-09 19:25:34 simoncereska

您可以通过contents访问Text Node本身。现在，如果你知道元素与文本开始，你可以这样做：

return this.nodeType === 3;

：

$($('.test').contents()[0]).replaceWith('New Text');

现在，如果你不知道该文本节点的数组中的位置，你可以用过滤

并比较文本值（如果你知道这些）。

Fiddle

来源

2012-04-09 19:28:25 Joe

Thx回复。我看到你在小提琴中工作。但是，不幸的是，在我的陈述结尾处引发了一个非法字符错误。 – John 2012-04-09 19:54:20

在该文本被替换总是会先于现有的跨度，它永远是假设的firstChild和，这将是展开的textNode：

$('.test').click(
    function() { 
     this.firstChild.nodeValue = 'Text2'; 
    });

JS Fiddle demo。

为了确保只有第一textNode改变，无论在哪里它是.test元素中发现：

$('.test').click(
    function(e) { 
     var newText = 'Text2', 
      children = e.target.childNodes; 
     for (var i=0,len=children.length;i<len;i++){ 
      if (children[i].nodeName == '#text'){ 
       children[i].nodeValue = newText; 
       return false; 
      } 
     } 
    });

JS Fiddle demo。

来源

2012-04-09 19:31:07

在div中替换文本而不影响其中的任何HTML标记

回答

相关问题