Select All Text in Div Tag (That's Uses Classes) When It's Clicked

Question

There're many solutions on the Net to do this where each div tag has a unique id (e.g.: Select all DIV text with single mouse click), but how am I able to do this for more than one div tag on the same page that use the same class?

The code would look something like this:

<td>
    <div class="code" onclick="">int variable_name;</div>
    <div class="code" onclick="">int variable_name = value;</div>
    <div class="code" onclick="">float variable_name;</div>
    <div class="code" onclick="">float variable_name = value;</div>
    <!-- etc... -->
</td>

Plain Javascript is preferred for the solution.

Hello, the required output is that all the text within the div (i.e. "int variable_name;") is selected when clicked on. — user6336941, Jun 29 '17 at 05:15

Suresh Karia · Answer 1 · 2017-06-29T05:38:45.760

In your case you can do this way:

getText = function(td) {
  var t = td.innerText || td.textContent;
  alert(t);
}

<table>
  <tr>
    <td>
      <div class="code" onclick="getText(this)">int variable_name;</div>
      <div class="code" onclick="getText(this)">int variable_name = value;</div>
      <div class="code" onclick="getText(this)">float variable_name;</div>
      <div class="code" onclick="getText(this)">float variable_name = value;</div>
    </td>
    <tr>
</table>

or the better way would be:

var c = document.getElementsByClassName('code');

for (var i = 0; i < c.length; i++) {
  c[i].onclick = function(c) {
    alert(c.innerText);
  }
}

<table>
  <tr>
    <td>
      <div class="code">int variable_name;</div>
      <div class="code">int variable_name = value;</div>
      <div class="code">float variable_name;</div>
      <div class="code">float variable_name = value;</div>
      <!-- etc... -->
    </td>
  </tr>
</table>

This solution doesn't answer the question completely, but its code is useful for when the selected text is to be used programmatically (which I will use later on), thanks. — user6336941, Jun 29 '17 at 05:57

score 1 · Accepted Answer · answered Jun 29 '17 at 05:26

You could do something like this:

 function getData(element)
{
   if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }

}

<html>
    <head>

    </head>
    <body>
        <td>
            <div class="code" onclick="getData(this)">int variable_name;</div>
            <div class="code" onclick="getData(this)">int variable_name = value;</div>
            <div class="code" onclick="getData(this)">float variable_name;</div>
            <div class="code" onclick="getData(this)">float variable_name = value;</div>
            <!-- etc... -->
        </td>
    </body>
</html>

score 0 · Answer 3 · answered Jun 29 '17 at 05:36

You can use querySelectorAll() to get all those elements, then, with addEventListener() register click to each element to call the selectElmCnt() function from this code:

<div>
  <div class="code">int variable_name;</div>
  <div class="code">int variable_name = value;</div>
  <div class="code">float variable_name;</div>
  <div class="code">float variable_name = value;</div>
  <!-- etc... -->
</div>
<script>
// selects the content of an element. Receives the object with that element
function selectElmCnt(elm) {
  // for Internet Explorer
  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
  }
  else if(window.getSelection) {
    // other browsers
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

var ecode = document.querySelectorAll('.code');
for(var i=0; i<ecode.length; i++){
  ecode[i].addEventListener('click', function(e){
    selectElmCnt(e.target);
  });
}
</script>

Source: http://coursesweb.net/javascript/select-content-div-html-element_cs

Select All Text in Div Tag (That's Uses Classes) When It's Clicked

3 Answers3