javascript Jquery - 修剪内部 HTML？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9076326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - trim inner HTML?
提问by Tim
I somehow need to trim()the innerHTML of my content... so I have something like this:
我不知何故需要trim()我的内容的innerHTML ......所以我有这样的事情：
<div>
<b>test</b>
123 lol
</div>
I basically want to rid of the white space that is ONLY between <div>and the next character, and the white space just before the closing </div>.
我基本上想去掉仅在<div>和 下一个字符之间的空白，以及结束前的空白</div>。
So the outcome would be:
所以结果应该是：
<div><b>test</b>
123 lol</div>
回答by Alex Wayne
var $mydiv = $('#mydiv');
$mydiv.html($.trim($mydiv.html());
This should take the contents any element, trim the whitespace from it and reset it as the content.
这应该采用任何元素的内容，从中修剪空白并将其重置为内容。
回答by Matthew
I don't really know why you want to do this but it seems like you are using jquery, so you can use the trim helper:
我真的不知道你为什么要这样做，但看起来你正在使用 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)
回答by Mr. Polywhirl
You can easily write a jQuery plugin to do this. I created both a static and instance method for this.
您可以轻松编写一个 jQuery 插件来执行此操作。我为此创建了静态和实例方法。
You can toggle the __DEBUG__TRIM_TYPEvariable below to change the technique. Each case will produce the exact same result. They are different ways of achieving the same result.
您可以切换__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>