-2
<a href="http://example.com">
   <p>select this text</p>
   <img src="" alt="">
</a>

Need to be able to copy text from p tag. The problem that p and img inside a and I can't select it.

I need exactly this HTML structure, as user should be able to copy link from that block. How can I do that?

2
  • textContent will give you all of the text within the containing element. Commented May 24, 2018 at 7:56
  • 1
    It is not very clear what exactly you want. Create selection range with JS? Or to allow user selecting content of paragraph with mouse drag? If latter, tell them to hold the ALT key during the selection…
    – myf
    Commented May 24, 2018 at 8:09

5 Answers 5

2

If you're asking for a solution in pure javascript, I'm guessing that this can work ?

var els = document.querySelectorAll("a[href='http://example.com']");
console.log(els[0].textContent);

Could be simpler using jQuery

4
  • 1
    Way simpler indeed: jQuery('a p').text() Commented May 24, 2018 at 8:02
  • 1
    Yes. And to get only that specific link jQuery('a[href="http://example.com"] p').text()
    – mtefi
    Commented May 24, 2018 at 8:06
  • Way simpler is not by targeting ('a p') (since multiple results). Also way simpler is by using the $ alias... Commented May 24, 2018 at 8:07
  • 1
    way way simpler would be to set an id on the p and grab its text directly Commented May 24, 2018 at 8:08
1

This is'nt correct use block-level elements as children of inline elements.

in your case,use of jQuery like this:

var copyStr = $('a[href="http://example.com"] > p').text();
0

Using textcontent property

const a = document.querySelector('a');
console.log(a.textContent);
<a href="http://example.com">
   <p>...</p>
   <img src="" />
</a>

0
0

Simply define an id to p tag and pull the text inside p tag using id like following:

$(document).ready(function(){
  var par = $('#pid').text();
  console.log(par)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="http://example.com">
   <p id="pid">...</p>
   <img src="" />
</a>

0

You can do so using Javascript execCommand("copy") see this explained in comment:

function CopyText() {
  /* Select Text inside p tag using createTextRange() */
  if (document.selection) { // IE
    var range = document.body.createTextRange();
    range.moveToElementText(document.querySelector('#copytext p'));
    range.select();
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.querySelector('#copytext p'));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  }

  /* Copie the Text inside the input to Clipboard */
  document.execCommand("copy");
  /* Alert success */
  alert("Url Copied to Clipboard")
}
img {
  width: 100%
}http://example.com
<a href="javascript:void(0)" id="copytext" onclick="CopyText()">
  <p>http://example.com</p>
  <img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1" />
  <input type="text" id="copy" style="opacity:0;height:0;width:0" />
</a>

Not the answer you're looking for? Browse other questions tagged or ask your own question.