JavaScript to Get Paragraph of Selected Text in Web Page

javascript to get paragraph of selected text in web page

This is actually rather hard to do because you have to consider six cases:

1. The selection is not within a paragraph (easy);
2. The entire selection is within one paragraph (easy);
3. The entire selection crosses one or more sibling paragraphs (harder);
4. The selection starts or ends in an element not within a paragraph (harder);
5. The paragraphs spanned are at different levels eg one is within a list item while two others are siblings of the list (even harder); and
6. Some combination of the above.

So firstly you have to decide how complete you want the solution to be. I'll only cover the simplest cases of (1) and (2).

function getSelectedParagraphText() {
  if (window.getSelection) {
      selection = window.getSelection();
  } else if (document.selection) {
      selection = document.selection.createRange();
  }
  var parent = selection.anchorNode;
  while (parent != null && parent.localName != "P") {
    parent = parent.parentNode;
  }
  if (parent == null) {
    return "";
  } else {
    return parent.innerText || parent.textContent;
  }
}

Note: If you're after tags too replace textContent with innerHTML.

Edit: Better version put in, including better browser compatibility.

javascript to get next-previous paragraph of selected text in web page

You can use previousSibling and nextSibling to get parameters.

HTML:

<p> This is 1st paragraph</p>
<p> This is 2nd paragraph</p>
<p> This is 3rd paragraph</p>
<a href="javascript:void(0)" onclick="getSelected(-1)">Prev</a>
<a href="javascript:void(0)" onclick="getSelected(1)">Next</a>

Javascript:

function getSelected(direction) {
  var userSelection;
  if (window.getSelection) {
      selection = window.getSelection();
  } else if (document.selection) {
      selection = document.selection.createRange();
  }
  var parent = selection.anchorNode;
  parent = parent.parentNode;
  if(direction == -1){
    var prevEle = parent.previousSibling;
    while(prevEle.nodeType!=1){
        prevEle = prevEle.previousSibling;
    }
    alert(prevEle.innerHTML);
  }else {
    var nextEle = parent.nextSibling ;
    while(nextEle.nodeType!=1){
        nextEle = nextEle.nextSibling;
    }
    alert(nextEle.innerHTML);
  }
}

Get paragraph text inside an element

Alternatively, you can also pass the li element itself to your myfunction function as shown:

function myfunction(ctrl) {
  var TextInsideLi = ctrl.getElementsByTagName('p')[0].innerHTML;
}

and in your HTML, <li onclick="myfunction(this)">

How do I check if selected text on a web only consists of words in JavaScript?

The main obstacle in achieving what you want is how to tell your program what a "word" actually is.

One way would be to have a full dictionary of all English words.

const setOfAllEnglishWords = new Set([  "Hello",  "a",  "text",  "for",  "the",  "example"  // ... many many more]);
const selection = "lo, a text for the example!";const result = selection  .replace(/[^A-Za-z0-9\s]/g, "") // remove punctuation by replacing anything that is not a letter or a digit with the empty string  .split(/\s+/)                   // split text into words by using 1 or more whitespace as the break point  .filter(word => setOfAllEnglishWords.has(word));
console.log(result);

How can I know when the user selects a paragraph?

You can bind a mouseup event to the paragraph("p") tag. Within that event handler, you can check:

document.selection.createRange().text

or

window.getSelection()

Also, you can check here
javascript to get paragraph of selected text in web page.

Get selected option text with JavaScript

Try options

function myNewFunction(sel) {  alert(sel.options[sel.selectedIndex].text);}

<select id="box1" onChange="myNewFunction(this);">  <option value="98">dog</option>  <option value="7122">cat</option>  <option value="142">bird</option></select>

How to get highlighted text from webpage with JavaScript

A better way to do this is to add an item to the context menu. For this, the user will select something, and right-click, and select your menu entry to send the selection to your extension.

chrome.contextMenus.create(
  id : 'selectionGetter',
  title : 'send selected text',
  contexts : ['selection'],
);

chrome.contextMenus.onClicked.addListener(function (info,tab) {
  //showing alert would require you to send a message to the active tab,
  //handle it in the contentscript and send alert from there

  //alternate lazy usage example:
  new Notification('My extension',{
    body : 'you selected: '+info.selectionText,
  });
});

---

Related Topics