How should I truncate dynamic string in the middle using JS or CSS?
Example dynamic string:-
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > run > test > run > run > test > run</div>
Expected string:-
Test > run > test > run > ... run > run > test > run
Thanks in advance.
Use String#replace method with the following regex
((?:[^>]+>){4}).+((?:>[^>]+){4})
$('.selected-option').text(function(i, v) {
return v.replace(/((?:[^>]+>){4}).+((?:>[^>]+){4})/, '$1 ... $2')
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > run > test > run > run > test > run</div>If you don't want the > after ... then use the following regex
((?:[^>]+>){4}).+>([^>]+(?:>[^>]+){3})
$('.selected-option').text(function(i, v) {
return v.replace(/((?:[^>]+>){4}).+>([^>]+(?:>[^>]+){3})/, '$1 ... $2')
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > run > test > run > run > test > run</div>
