javascript: help with getting selected words from 2 columns of a table RRS feed

  • Question

  • User2146470223 posted


    I know how to get selected strings from a html page with Javascript but now I have a very specific goal to achieve.

    I'm comparing 2 texts they will either be displayed in a two column table within a textbox or directly in a table on the page iteself. I guess it will be the latter one due to selection issues within the textbox that far. If there is a better way than a table then please let me know.

    So let's say I have a table with one row and 2 columns for my example:

    cell 1                    //  cell 2

    Hello, here I am.   //   Hallo, hier bin ich.

    What I now want to do is select/highlight e.g. "Hello" from cell 1 and "Hallo" from cell 2. Selection of words is done with the help of CTRL + mouse selection. This is already tricky as quite often the selection of the first selected word or words is lost when trying to select the second part in the second cell. (Within the same table in plain html on the page itself, it occurs less often.) Then I click on a button and the two words are processed with Javascript. Like match them in a textbox: e.g. Hello = Hallo.

    The selection in both cells can be one or more words respectively and they do not need to be in a row. e.g. I introduce my wife to my friends. //  Ich stelle meine Frau meinen Freunden vor.

    For this example introduce would match stelle vor (introduce = stelle vor) so I would need to get "introduce" from 1 and "stelle" and "vor" from 2.

    Normally if I get selected text with javascript it selects all selections and puts them in a row from top left to botton right. Selection for second example: introduce stelle vor

    So how do I tell Javascript to get "introduce" from cell1 and add it before the "=" and "stelle vor" from cell2 to put it after the "=" ?

    Or should I maybe tag every word with a class and add a script to somehow remember a double clicked word or a selection in the order they are selected (by adding it to a text field per column) and then put them togehter with a second javascript that merges these two fields?

    Anyone got an idea how to best solve this or where I can find something similar on the net?

    Thanks in advance,


    Tuesday, May 24, 2016 9:03 PM

All replies

  • User2009744128 posted

    Hi Translating-IT,

    If I understood your requirement, I believe you are trying to get the text that user selects, i am not sure how to highlight that particular text in a paragraph or table columns. Please use the following code and test it:

    <!DOCTYPE html>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Get User Selection</title>
    function getSelectedText()
    var range = window.getSelection().getRangeAt(0),
    content = range.extractContents(),
     span = document.createElement('SPAN');
    var htmlContent = span.innerHTML;
    <body >
    what is up lads?
      what is my name?
        <div id="normalText">
      <button onclick="getSelectedText()">Click me</button>

    here, i am selecting a text, and then clicking on the button to append the selected text into a div element.

    Hope this helps.

    Wednesday, May 25, 2016 12:12 AM
  • User2146470223 posted

    Hi Shivigupta,

    As I wrote: I know how to get selected text, the question is if my question can be solved with a one click solution. Getting the various text parts with more than one click would not be very user friendly although at the moment it seems the best solution.

    Sunday, June 12, 2016 1:41 PM
  • User2146470223 posted


    I was just wondering, could this be done with frames or something similar?

    If I check https://jsfiddle.net/julmot/vpav6tL1/ for example, I can select words in the different parts of the page, just like I would like to do on my page. I just need to find out how they did that. Maybe you can help here.



    Friday, November 4, 2016 11:12 AM
  • User2146470223 posted


    Forget about the frames, it seems it's a "side effect" of Codemirror. Is Codemirror the only editor leading to the behaviour, that you can select text in the or each single editor and once outside the editors without the highlighting being lost?



    Sunday, November 6, 2016 11:01 AM
  • User-474980206 posted

    the standard browser behavior, is that a window can only have one selection (most browser only support a single select range even with code). if a page has multiple windows via iframes, than each window can have one selection.

    if iframes don't work, you will need to write your own selection and selection display logic.

    Sunday, November 6, 2016 8:33 PM
  • User2146470223 posted

    Hi Bruce,

    iframes don't seem to work. The problem is that I don't really know how to write such a logic. Up to know I only managed to write a logic to select everything between a tag pair with double click, but I guess it won't be that easy. ;)

    Could you give me a hint on where to find examples or tutorials?



    Monday, November 7, 2016 9:10 PM
  • User2146470223 posted

    Forget my previous post, at least part of it ;)

    Iframes do the trick (I had used some wrong code) but I still would be interested in how to code an own logic for selections as it would allow me to avoid Iframes which I don't really need in terms of loading another page. It would only be used to display 2 different columns of a table independently, which is not really the purpose they are meant for.



    Tuesday, November 8, 2016 10:50 PM