blocks|key|503285|text|文本不应该是独立的。将其放入span元素中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|503286|将其更改为：|503287|<div+id="one">
+++++++<div+class="first"></div>
+++++++<span>"Hi+I+am+text"</span>
+++++++<div+class="second"></div>
+++++++<div+class="third"></div>
</div>|code-block|syntax|javascript|503288|$('#one+span').text('Hi+I+am+replace');|503289|entityMap^0|E|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>Text shouldn't be on its own. Put it into a <code>span</code> element.</p>

<p>Change it to this:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div id="one"&gt;
       &lt;div class="first"&gt;&lt;/div&gt;
       &lt;span&gt;"Hi I am text"&lt;/span&gt;
       &lt;div class="second"&gt;&lt;/div&gt;
       &lt;div class="third"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<pre class="lang-js prettyprint-override"><code>$('#one span').text('Hi I am replace');
</code></pre>


blocks|key|503346|text|您需要将文本设置为空字符串以外的值。此外，.html()函数应该在保留div的超文本标记语言结构的同时执行此操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|503347|$('#one').html($('#one').html().replace('text','replace'));|code-block|syntax|javascript|503348|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You need to set the text to something other than an empty string. In addition, the .html() function should do it while preserving the HTML structure of the div.</p>

<pre><code>$('#one').html($('#one').html().replace('text','replace'));
</code></pre>


blocks|key|286661|text|找到文本节点(nodeType==3)并替换textContent|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|286662|$('#one').contents().filter(function()+{
++++return+this.nodeType+==+3
}).each(function(){
++++this.textContent+=+this.textContent.replace('Hi+I+am+text','Hi+I+am+replace');
});|code-block|syntax|javascript|286663|请注意，根据docs，您可以将上面的硬编码3替换为Node.TEXT_NODE，这将使您所做的事情更加清晰。|286664|​|286665|$('#one').contents().filter(function()+{
++++return+this.nodeType+==+Node.TEXT_NODE;
}).each(function(){
++++this.textContent+=+this.textContent.replace('Hi+I+am+text','Hi+I+am+replace');
});|286666|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div+id="one">
+++++++<div+class="first"></div>
+++++++"Hi+I+am+text"
+++++++<div+class="second"></div>
+++++++<div+class="third"></div>
</div>|286667|286668|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType^0|7|B|M|B|0|0|L|1|P|E|6|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|M|3|N|5|6|7|1F|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|1G|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|H|7|1H|8|@]|D|@]|E|$I|J]]|$1|S|3|N|5|6|7|1I|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>Find the text nodes (<code>nodeType==3</code>) and replace the <code>textContent</code>:</p>
<pre><code>$('#one').contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
});
</code></pre>
<p>Note that as per the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType" rel="noreferrer">docs</a> you can replace the hard-coded <code>3</code> in the above with <code>Node.TEXT_NODE</code> which is much clearer what you're doing.</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#one').contents().filter(function() {
    return this.nodeType == Node.TEXT_NODE;
}).each(function(){
    this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="one"&gt;
       &lt;div class="first"&gt;&lt;/div&gt;
       "Hi I am text"
       &lt;div class="second"&gt;&lt;/div&gt;
       &lt;div class="third"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|503456|text|如果你确实知道你要替换的文本，你可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|503457|$('#one').contents(':contains("Hi+I+am+text")')[0].nodeValue+=+'"Hi+I+am+replace"';|code-block|syntax|javascript|503458|http://jsfiddle.net/5rWwh/|offset|length|503459|或|503460|$('#one').contents(':not(*)')[1].nodeValue+=+'"Hi+I+am+replace"';|503461|$('#one').contents(':not(*)')选择非元素的子节点，在本例中是文本节点，第二个节点是我们想要替换的节点。|style|CODE|503462|http://jsfiddle.net/5rWwh/1/|503463|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|Q|0|0|0|0|0|T|0|0|S|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@$I|15|J|16|1|17]]|A|$]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1A|8|@$I|1B|J|1C|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1D|8|@]|9|@$I|1E|J|1F|1|1G]]|A|$]]|$1|U|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|H]]|11|$5|X|Y|Z|A|$10|T]]]]

<p>If you actually know the text you are going to replace you could use</p>

<pre><code>$('#one').contents(':contains("Hi I am text")')[0].nodeValue = '"Hi I am replace"';
</code></pre>

<p><a href="http://jsfiddle.net/5rWwh/" rel="noreferrer">http://jsfiddle.net/5rWwh/</a></p>

<p>Or</p>

<pre><code>$('#one').contents(':not(*)')[1].nodeValue = '"Hi I am replace"';
</code></pre>

<p><code>$('#one').contents(':not(*)')</code> selects non-element child nodes in this case text nodes and the second node is the one we want to replace.</p>

<p><a href="http://jsfiddle.net/5rWwh/1/" rel="noreferrer">http://jsfiddle.net/5rWwh/1/</a></p>


blocks|key|503507|text|另一种方法是保留该元素，更改文本，然后将该元素追加回来|type|unstyled|depth|inlineStyleRanges|entityRanges|data|503508|const+star_icon+=+$(li).find('.stars+svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)|code-block|syntax|javascript|503509|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Another approach is keep that element, change the text, then append that element back</p>

<pre><code>const star_icon = $(li).find('.stars svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)
</code></pre>


blocks|key|503585|text|以防万一，如果你不能改变HTML。非常原始但简短&有效。(它将清空父div，因此子div将被删除)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|503586|​|503587|$('#one').text('Hi+I+am+replace');|code-block|syntax|javascript|503588|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div+id="one">
++<div+class="first"></div>
++"Hi+I+am+text"
++<div+class="second"></div>
++<div+class="third"></div>
</div>|503589|503590|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Just in case if you can't change HTML. Very primitive but short &amp; works. (It will empty the parent div hence the child divs will be removed)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#one').text('Hi I am replace');</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div id="one"&gt;
  &lt;div class="first"&gt;&lt;/div&gt;
  "Hi I am text"
  &lt;div class="second"&gt;&lt;/div&gt;
  &lt;div class="third"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I have a div like:</p>

<pre><code>&lt;div id="one"&gt;
       &lt;div class="first"&gt;&lt;/div&gt;
       "Hi I am text"
       &lt;div class="second"&gt;&lt;/div&gt;
       &lt;div class="third"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I am trying to change only the text from "Hi I am text" to "Hi I am replace" using jquery.
This might be easy but I am not able to do it.</p>

<p>Using <code>$('#one').text('')</code> just empties the whole <code>#One</code> div.</p>


Replace only text inside a div using jquery

我有一个像这样的div：<div id="one">       <div class="first"></div>       "Hi I am text"       <div class="second"></div>       <div class="third"></div></div>我尝试使用jquer...

问使用jquery仅替换div中的文本
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery仅替换div中的文本EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery仅替换div中的文本
EN