JavaScript >> Javascript 文檔 >  >> jQuery

使用 jquery 僅替換 div 內的文本

文本不應單獨存在。將其放入 span 元素。

改成這樣:

<div id="one">
       <div class="first"></div>
       <span>"Hi I am text"</span>
       <div class="second"></div>
       <div class="third"></div>
</div>
$('#one span').text('Hi I am replace');

查找文本節點 (nodeType==3 ) 並替換 textContent

$('#one').contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
});

請注意,根據文檔,您可以替換硬編碼的 3 在上面用 Node.TEXT_NODE 這更清楚你在做什麼。

$('#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');
});
<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>


您需要將文本設置為空字符串以外的內容。此外,.html() 函數應該在保留 div 的 HTML 結構的同時做到這一點。

$('#one').html($('#one').html().replace('text','replace'));

Tutorial JavaScript 教程
  1. 打印 JSON 解析的對象?

  2. 在javascript中檢查null

  3. 如何使用 Google Authenticator 在 ASP.NET Core 中設置兩因素身份驗證

  4. 如何使用 D3.js 繪製 SVG?

  5. Angular 基礎:數據綁定第 7 部分——輸出裝飾器

  6. 如何在 JavaScript 中進行字符串替換以將“9.61”轉換為“9:61”?

  7. 組件未重新渲染時如何獲取更新的 redux-toolkit 狀態

  1. Heroku Deploy – 如何將 Web 應用程序或站點推送到生產環境

  2. 如何在 JavaScript 中解析 YYYYmmdd 格式的日期?

  3. JavaScript 數組 some() 函數解釋及示例

  4. Angular JS 處理控制器事件

  5. 在Javascript中檢測觸摸板與鼠標

  6. JavaScript 獲取當前日期 - JS 中的今天日期

  7. 對像數組中的未定義值Vuejs

  1. 我的圖像在旋轉時沒有佔據畫布的整個寬度

  2. 在 Angular 14 應用程序中讀取本地 JSON 文件

  3. 如何在 HTML、CSS 和 JavaScript 中打印乘法表

  4. Native Module 不能為 null (ios) – Expo