如何从包含在 html 元素中的字符串中删除最后一个字符？

Question

我有包含单词的跨度，我想弄清楚如何使用 jquery 删除最后一个字符。 例如：

<span>text inside</span>

那么将是：

<span>text insid</span>

我认为它会像这样简单

$('span').last().remove();

但这似乎行不通。 它只是删除整个 span 元素。 有任何想法吗？ 谢谢！

Answer 1

在原版 Javascript 中：

let val = document.querySelectorAll("span");

val.forEach(item => {
  item.textContent = item.textContent.slice(0, -1);
});

Answer 2

使用 jQuery text(function)可能是最少的代码。

当函数作为参数给出时，它将迭代选择器集合中的所有内容并将当前文本公开为第二个参数

 $('span').text((_, txt) => txt.slice(0,-1));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>text inside</span><br/> <span>Another span</span>

Answer 3

您将编辑文本内容而不是 DOM 元素本身

tmp = $('span').text();
$('span').text(tmp.substring(0,tmp.length -1));

Answer 4

Javascript：

// Can use tage name, id and class (span, #span, .span)
function removeLast(objName){
obj = document.querySelector(objName);
objVal = obj.innerHTML;
length = objVal.length;
obj.innerHTML = objVal.substr(0, length - 1);
}
removeLast("span");
removeLast("#id");
removeLast(".class");

HTML：

<span>Test Only Tag</span><br/>  
<span id="id">Test Only ID</span><br/>  
<span class="class">Test Only Class</span><br/>  

Answer 5

我会喜欢：

 $(function(){ $.fn.extend({removeLastChar:function(count = 1){ return this.each(function(i, e){ if(e.value)e.value = e.value.slice(0, -count); if(e.textContent)e.textContent = e.textContent.slice(0, -count); }); }}); $('#test1').removeLastChar(); $('#test2').removeLastChar(); console.log($('#test3').removeLastChar(4).val()); }); // end load

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='test1'>This is Test #1</div> <input id='test2' type='text' value='This is the Second Test' /> <button value='just a test' id='test3'>This should work too!</button>

Answer 6

您可以使用 JQUERY 获取length元素text() ，然后使用长度 - 1 splice()字符串。这将删除字符串中的最后一个字符...

 // For multiple elements, you can use a loop to target the element you desire to affect. let $span = $( "span" ); $span.each(function(){ console.log($(this).text().slice( 0, -1 )); }); // or you could reference the key in an each loop // below I will target the third element in the list using its key => `2` $.each( $span, function( key, value ) { if(key === 2){ console.log( key + ": " + value.textContent.slice(0, -1) ); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>text inside</span><br> <span>text inside is different</span><br> <span>this is the text inside</span><br> <span>more text inside</span><br> <div id="display"></div>

对 OP 问题的简单回答，没有任何对键的引用，只需使用 jquery 抓取元素标签并切片 text() ...

 let slice = $( "span" ).text().slice( 0, -1 ); console.log(slice);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>text inside</span>

Answer 7

单线解决方案：

$('span').html($('span').html().substr(0, $('span').html().length-1));