jquery - 修剪內部HTML？

不知何故，我需要trim()我的內容的innerHTML ...所以我有這樣的事情：jquery - 修剪內部HTML？

<div> 
    <b>test</b> 

123 lol 
      </div>

我基本上要擺脫空白，這只是<div>和下字符之間，和關閉</div>之前的空白空間。

那麼結果將是：

<div><b>test</b> 

123 lol</div>

來源

2012-01-31 Tim

爲什麼？這是一種需要的奇怪的事情。 – 2012-01-31 08:20:43

@jjj'$ .trim'對於操作DOM不是一個好的選擇。 – Alnitak 2012-01-31 08:35:49

var $mydiv = $('#mydiv'); 
$mydiv.html($.trim($mydiv.html());

這應該採取的任何內容元素，修剪從它的空格和其重新設置內容。

來源

2012-01-31 08:22:08

必須有比序列化和反序列化DOM更好的方法... – Alnitak 2012-01-31 08:26:04

您可能能夠鑽取DOM並找到空白文本節點並將其更加人工地刪除。但jQuery不會幫助那裏，我不知道該怎麼做。 – 2012-01-31 08:28:03

不是那麼難 - 查看'element.childNodes'，從'.firstChild'開始檢查'.nodeType == 3'，如果'.textContent'屬性全是空格，則刪除節點 - 重複直到第一個非文本節點被發現。然後從最後一個子節點向後執行。 – Alnitak 2012-01-31 08:33:56

我真的不知道你爲什麼要做到這一點，但它好像你正在使用jQuery，所以你可以使用裁剪幫手：

var $stuff = $(...the messy html you have above including the outer div); 
var tidy = $.trim($stuff.html()); 
// tidy has no more div wrapper so you can do this: 
return "<div>" + tidy "</div>" 
// or this (but i dunno that it won't pad it again) 
$stuff.html(tidy)

來源

2012-01-31 08:23:50 Matthew

兩個很好的答案，我選擇了更簡潔一點。非常感謝！ – Tim 2012-01-31 08:30:20

實際上他們都不是很好的答案 - 正確的方法是顯式移除在div的子列表的開始或結尾處找到的空文本節點。但是我現在沒有時間寫這些。 – Alnitak 2012-01-31 08:31:38

你可以隨便寫一個jQuery插件來做到這一點。我爲此創建了一個靜態和實例方法。

您可以切換下面的__DEBUG__TRIM_TYPE變量來更改技巧。每種情況都會產生完全相同的結果。他們是實現相同結果的不同方式。

// jQuery Plugin 
 
// ============================================================================= 
 
(function($) { 
 
    $.fn.trimHtml = function() { 
 
    return this.html(function(index, html) { 
 
     return $.trim(html); 
 
    }); 
 
    }; 
 
    $.trimHtml = function(selector) { 
 
    return $(selector || '*').filter(function() { 
 
     return $(this).data('trim') === true; 
 
    }).trimHtml(); 
 
    } 
 
}(jQuery)); 
 

 
// Example 
 
// ============================================================================= 
 
$(function() { 
 
    var __DEBUG__TRIM_TYPE = 1; // You can change this to values between 1-3. 
 
    
 
    switch (__DEBUG__TRIM_TYPE) { 
 
     // Option #1. Select elements by a selector. 
 
     case 1: 
 
     $('.pre-block[data-trim="true"]').trimHtml(); 
 
     break; 
 

 
     // Option #2. Filter elements by a selector and their data. 
 
     case 2: 
 
     $('.pre-block').filter(function() { return $(this).data('trim'); }).trimHtml(); 
 
     break; 
 

 
     // Option #3. Apply function to all elements where the "trim" data is TRUE. 
 
     case 3: 
 
     $.trimHtml(); 
 
     break; 
 
    } 
 
});

h1 { font-size: 1.5em; } 
 
.pre-block { display: inline-block; white-space: pre; border: thin solid black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 
 

 
<h1>Not Trimmed</h1> 
 
<div class="pre-block" data-trim="false"> 
 
    Text not to be trimmed. 
 
    
 
</div> 
 

 
<h1>Already Trimmed</h1> 
 
<div class="pre-block" data-trim="false">Text already trimmed.</div> 
 

 
<h1>Trimmed</h1> 
 
<div class="pre-block" data-trim="true"> 
 
    Text that was trimmed. 
 
    
 
</div>

來源

2016-03-09 17:46:06

jquery - 修剪內部HTML？

回答

相關問題