logo标签列表

使用JavaScript删除字符串的最后一个字符。

javascriptjquerystring
18

我有一个带有一些字符的 DIV。每次点击 DIV 本身时，如何从文本中删除最后一个字符？

1
你从<div>的哪里删除字符？是从末尾还是开头？ - Russ Cam
9个回答
27

移除字符串的第一个字符

​$("div").on("click", function(){
    $(this).text(function(index, text){
        return text.replace(/^.(\s+)?/, '');
    });
});​​​​​​​​​​​​

删除字符串的最后一个字符

$("div").on("click", function(){
    $(this).text(function(index, text){
        return text.replace(/(\s+)?.$/, '');
    });
});

删除特定字符

$("div").on("click", function(){
    $(this).text(function(index, text){
        return text.replace(/r/gi, '');
    });
});

在此可以在线查看每个示例：http://jsfiddle.net/Xcn6s/

谢谢您的快速回复，但我应该用什么替换“r”以便它可以删除所有类型的字符？ - Mikkel
你想删除哪些字符，Mikkel？ - Sampson
3
不要从文本中编写 html，因为您可能无法正确处理 < 和 & 字符，导致潜在的 XSS 安全问题。此外，如果文本的最后一个字符是 \n，则会失败，因为 . 不能匹配换行符。 - bobince
6
自从什么时候开始，jQuery 成为事实上的 JavaScript 标准？ - asnyder
3
问题上有一个jQuery标签，推测是由提问者添加的。 - Tim Down
24

假设您已经有了对div的引用，并且它只包含一个文本节点（如您的问题所暗示的那样），那么这非常简单。以下是一个非jQuery解决方案：

div.onclick = function() {
    var textNode = this.firstChild;
    textNode.data = textNode.data.slice(0, -1);
};
请问给这个回答点踩的人可以解释一下为什么吗？ - Tim Down
1
我没有对其进行投票，但您确定 this.firstChild.data 是您想要执行的操作吗？（OP没有表示 div 中有任何子元素，并且.data 在所有浏览器中都有效吗？）为什么不使用 this.innerHTML？ - Dan Beam
1
我理解"I have a DIV with some characters"的意思是类似于<div>blah blah</div>，这种情况下第一个（也是唯一的）子节点是一个文本节点。所有主要浏览器（包括IE版本5及以上）都支持文本节点的data属性。与使用innerHTML相比，它更快，因为它只需要改变一个文本属性并在文档中重新呈现它，而innerHTML必须构建innerHTML，将其解析成DOM节点树，然后重新插入到文档中。 与innerHTML不同，data在DOM标准中也有说明，并且在所有浏览器中都表现出统一的行为。 - Tim Down
data 是 DOM Level 1 Core，且在任何地方都非常稳定；只要确保只有一个文本节点子元素，就可以使用它。至少这个答案不允许 HTML 注入，并且不像其他大多数答案一样会卡在换行符上！ - bobince
顺便说一下，如果文本被分割了，比如 <div>I <i>loved</i> it!</div>，那么这个方法就不起作用了，因为最后一个文本节点不再是你想要处理的节点。相反，你必须获取最后一个具有节点类型3的子节点。 - Dan Beam
@Dan：没错。答案明确提到它仅适用于 div 中的单个文本节点。 - Tim Down
3

编辑：以下是最简单的方法，不需要使用任何库依赖

function removeLastChar(node) {
    var i = node.childNodes.length;
    while (--i >= 0) {
        if (3 === node.childNodes[i].nodeType) {
            node.childNodes[i].data = node.childNodes[i].data.replace(/\S\s*$/, '');
            break;
        }
    }
}

/\S\s*$/ 仍然 表示“末尾的最后一个非空格字符”。

注意：这是从 Tim Down 的解决方案中借鉴并结合多年的 Web 开发经验得出的结论，:)

1
@Tim Down - 我也不知道为什么它被投票否决了。StackOverflow上有很多巨魔，但也有比我更懂的人（所以你永远不知道）。别担心，我的感觉没有受伤，哈哈。Ash Searle同意我在String.prototype.substr中使用负数 http://hexmen.com/blog/2009/12/javascript-date-to-time/#li-comment-31380（链接只在FF中有效） - Dan Beam
抱歉，我的意思是 slice 而不是 substr。 - Dan Beam
1
不是我点的踩，但在处理HTML时，如果出现<或&字符，它会删除&entref;的尾部;而不是整个字符。浏览器可能会通过重新添加;来修复它。 - bobince
我点赞仅仅是因为你意识到框架是一种依赖，依赖是一种弱点，每个开发者都应该编写强大的代码。 - John
说实话，我很惊讶replace不是就地替换。我猜测g是你的反对票，因为它符合每个单词的正则表达式规则中的最后一个字符。 - Joseph Poirier
显示剩余2条评论
2

除了Jonathan的答案外，如何删除第一个字符：

$("div.myDiv").click(function(){
    $(this).html($(this).text().substring(1));
});

或者，删除最后一个字符：

$("div.myDiv").click(function(){
    $(this).html($(this).text().replace(/.$/g, ''));
});

或者，你可以疯狂一点，在随机位置删除一个字符：
$("div.myDiv").click(function(){
    var text = $(this).text();
    var index = Math.round(Math.random() * (text.length - 1));
    var result = text.substring(0, index) + text.substring(index + 1, text.length - 1);
    $(this).html(result);
});

不要随机删除元素，你可以使用上述函数和预定义的索引来从特定位置删除。

Mikkel，请问你能告诉我们你想要什么吗？Tatu提供了许多例子 - 我们都不知道你真正想要的是什么 :) - Sampson
是的，如果 Mikkel 在他最初的问题中解释清楚了这一点，那么我们就不必猜测这么多了，这将会很好。 - Tatu Ulmanen
我只是想删除最后一个字符，无论它是什么字符。你的代码需要一个特定的字符。但我很感激你的帮助。谢谢 :D - Mikkel
哦，你更新了它，抱歉我没有注意到。这是我第一次使用这个网站。 - Mikkel
2

每次单击div时，这将删除一个字符。如果没有更多的要求，我就无法提供更多信息。

<html>

<head>
    <script>

    function deleteChar(div) {
       div.innerHTML = div.innerHTML.replace(/.$/, '');
    }

    </script>
</head>

<body>

    <div onclick="deleteChar(this)">this is my div</div>

</body>
</html>

哦，抱歉，您要求的是jquery...好吧，以下是如何在纯javascript中实现。

0
如果您想在每次单击时删除文本的第一个字符，可以使用substring。例如：
$("#textDiv").click(function(){
  $(this).html($(this).text().substring(1));
});
从text读取，写入到html：如果有任何<或&字符在其中，你刚刚改变了它们的含义，并可能将不良JavaScript注入页面中。 - bobince
0

为了补充Jonathon的回答，使用...

$("div.myDiv").click(function(){
  $(this).html( $(this).text().replace("/.$/gi", "o") );
});

删除最后一个字符

0

纯JavaScript：

<div id="text">This is some text</div>
<script>
var node = text.firstChild;
var nodeValue = "";
var nodeValueLength = 0;
text.onclick = function () {
    nodeValue = node.nodeValue;
    node.nodeValue = nodeValue.substring(0, nodeValue.length - 1);
};
</script>
这样不行。文本节点不会触发点击事件。text变量定义在哪里？为什么要逐个字符地构建新节点值？ - Tim Down
文本由ID定义，子字符串可能是更好的方法。 - GR1000
我的第一个观点是无效的，因为我误读了一行，对此感到抱歉。最好使用document.getElementById("text")来定义text，因为不是所有浏览器（可能只有IE）都会从它们的ID创建元素引用。另外，nodeValue.slice(0, -1)比substring版本更简洁。 - Tim Down
-1

通过使用 attribute$= CSS3 选择器，在 jQuery 选择中表示“以...结尾”，非常简单:

要删除第一个字符：

$("div[id$=/]").each(function(){ 
    this.id = this.id.substr(1);
});

删除最后一个字符：

$("div[id$=/]").each(function(){ 
    this.id = this.id.substr(0,this.id.length - 1);
});
以 / 结尾的 ID 的 div 与此有什么关系？ - Tatu Ulmanen
使用Adobe® Browser Lab，我在IE6、IE7、Firefox 2.0和Firefox 3.0、Safari 3.0中测试了这段代码。我还在Safari 4.0和Firefox 3.5中进行了本地测试。在所有浏览器中，它都能正常工作，并从ID中删除了尾部的/。 - Ashish
我认为您没有理解问题 - OP想要删除div中的最后一个字符。 - Nick Presta
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接