CODEWITHSUNDEEP
javascriptjquery
Mina Hafzalla
Mina Hafzalla

Reputation: 2821

Removing last word from an input value

I've been trying to remove the last word of an input value using the following code:

$('#buttonid').on('click',function () { 
    var textVal = $('#inputid').val();
    $('#inputid').val(textVal.substring(0,textVal.length - 1));
});

This code removes only one letter from the word. I know I can delete the whole word by specifying the number of its letter in textVal.length - 1. However, the word is not static, so I want to use something that removes any last word in the input value.

Edit, Note: Words are separated by dots, not spaces.

Any suggestions?

Upvotes: 3

Views: 2424

Answers (4)

Diamond
Diamond

Reputation: 598

You can use the lastIndexOf method to get the last index of occurring peroid. Here's the code:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
	$("#buttonid").on('click',function () 
	{ 
		//get the input's value
		var textVal = $('#inputid').val();
		var lastIndex = textVal.lastIndexOf(".");
		$('#inputid').val(textVal.substring(0,lastIndex));
    });
});
</script>
</head>
<body>
<input type="button" id="buttonid" value="Go">
</input>
<input type="text" id="inputid" value="Anything.could.be">
</input>
</body>
</html>

Upvotes: 1

dfsq
dfsq

Reputation: 193261

You can use lastIndexOf method to find a position of the last dot separating last word:

$('#buttonid').on('click', function () {
    var textVal = $('#inputid').val();
    $('#inputid').val(textVal.substring(0, textVal.lastIndexOf('.')));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="buttonid">Remove</button>
<input type="text" id="inputid">

You can also make your code a little cleaner if you don't reselect the same element again but use a function in the val method:

$('#buttonid').on('click', function () {
    $('#inputid').val(function() {
        return this.value.substring(0, this.value.lastIndexOf('.'));
    });
});

Bonus point. If you want you can use very simple regular expression (although it might be overkill here, but regexp is more reliable then '.' in lastIndexOf) to remove everything after the last word boundary, for example:

$('#inputid').val(function() {
    return this.value.replace(/\b.\w*$/, '');
});

Upvotes: 5

Brandon Anzaldi
Brandon Anzaldi

Reputation: 7270

Another option would be to transform the text to an array, and pop() it, to remove the last element. Then, rejoining it using space as a separator.

$('#buttonid').on('click', function () { 
    var textVal = $('#inputid').val().split(' ');
    textVal.pop();
    $('#inputid').val(textVal.join(' '));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="inputid"></textarea><br>
<button id="buttonid">Remove Word</button>

Upvotes: 1

Richard Kho
Richard Kho

Reputation: 5286

Use lastIndexOf(' ') instead of length - 1. The former will take the last index of a space (which signifies the last word, barring any edge cases you may have) and use it as the end point for your substring.

The latter is supposed to only give you the index of the last letter, since calling textVal.length would result in the number of actual characters in the string, not words.

$('#inputid').val(textVal.substring(0, textVal.lastIndexOf(' '));

Upvotes: 1

Related Questions