how to .trim() the selected text?

Question

Might be a pretty easy question, but I can't seem to solve it somehow.

I want to be able to select text inside a td-element from a table. The problem is there is a tab inside the text that i want to get rid of.

I tried this so far:

function getSelectionText(){
    var selectedText = ""
    if (window.getSelection){ // all modern browsers and IE9+
        selectedText = window.getSelection().toString().trim()
    }
    return selectedText
}

$('td').click(function(){
    var selected = getSelectionText();
    document.execCommand('copy');
});

sadly this still returns the copied text with a tab behind it. This is really annoying when trying to copy passwords into a passwordfield, because the user can't see that there is a tab in the dotted password.

hopefully someone can help, thanks in advance!

EDIT:

I slightly changed the accepted answer and don't need the getSelectionText() function anymore. Hope this helps someone with the same problem.

$('td').click(function(){
    var selected = $(this).html();
    var inp = $("<input/>",{id:"copySelected"});
    $("body").append(inp)
    inp.val(selected);
    inp[0].select();
    document.execCommand('copy');
    inp.remove();
});

Every click will copy the clicked td-cell to the clipboard

Add your HTML markup too, otherwise its hard to know what to select on — Master Yoda, Nov 27 '17 at 12:32
This should have worked. But as a alternate, you can try `str.replace(/(^\s|\s$)/, '')` — Rajesh, Nov 27 '17 at 12:33
@Rajesh Forgot to reply, but I tried your solution, but it somehow did not work — ramon abacherli, Nov 27 '17 at 13:02

mplungjan · Accepted Answer · 2017-11-27T13:00:28.430

You have jQuery so use $.trim()

$.trim(window.getSelection().toString())

which should work on all browsers supported by the version of jQuery you use.

$.trim() function removes all newlines, spaces (including non-breaking spaces), and tabs from the beginning and end of the supplied string.

HOWEVER: the execCommand copy takes the selected string instead of the string copied and change by you.

You would need to change the selected range OR copy the manipulated string elsewhere before copying it.

Here I create a temp field to hold the manipulated string before copying it.

function getSelectionText(){
    var selectedText = ""
    if (window.getSelection){ // all modern browsers and IE9+
        selectedText = $.trim(window.getSelection().toString());
    }
    return selectedText;
}

$('td').click(function(){
    var selected = getSelectionText();
    console.log(selected.length,selected,encodeURIComponent(selected))
    var inp = $("<input />",{id:"copySelected"});
    $("body").append(inp)
    inp.val(selected);
    inp[0].select();
    document.execCommand('copy');
    inp.remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table><tbody><tr><td>Here is some text with trailing tabs           </td><td>|Next cell</td></tr>
</table>
<textarea>Paste the 36 chars (47 with tabs) in after clicking</textarea>

tried that, but still is copying the tab. could it be that the document.execCommand('copy') is not copying the last variable? — ramon abacherli, Nov 27 '17 at 12:42
Updated to actually copy the string you want instead of the selected string — mplungjan, Nov 27 '17 at 12:54
It works, but the selected text unselects itself automatically right away, do you know why? And btw, is the problem i had a bug? — ramon abacherli, Nov 27 '17 at 13:00
The problem you had was that the execCommand copied the selected text and YOU copied the selected text - the execCommand did not care about your manipulations. If you want to keep the selection you need to not click. https://stackoverflow.com/questions/7858725/how-to-maintain-selection-after-click-in-html — mplungjan, Nov 27 '17 at 13:10

score -1 · Answer 2 · answered Nov 27 '17 at 12:50

-1

to remove a tab from a string you can use replace('\t',''); it will do the magic.

but as i know a trim rid off the white-spaces '\n' '\t' as well

answered Nov 27 '17 at 12:50

Daniel Shlenin

11
2

Normally this would work, but in this situation it did not. – ramon abacherli Nov 27 '17 at 12:55
explain yourself – Daniel Shlenin Nov 27 '17 at 13:23
I believe you're right, replace works the way you say. The problem here is that replacing the tab didn't work because the document.execCommand('copy') method didn't copy my manipulation with replace or .trim(). Look at the answer from @mplungjan btw I am not the one that downvoted you – ramon abacherli Nov 27 '17 at 14:09

how to .trim() the selected text?

2 Answers2