• J'ai un écouteur mouseUpEvent qui exécute la fonction getSelectionText.
  • getSelectionText capture la plage sélectionnée avec window.getSelection et stocke dans une variable.

Je voudrais remplacer le texte de la plage sélectionnée actuelle, envelopper le HTML avec des balises HTML et effectuer le rendu.

HTML

   <div ng-mouseup="mouseUpEvent()">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam sodales ipsum quis tincidunt. In scelerisque lorem a metus volutpat volutpat. 
      </div>

JS

//Get Selected Content
$scope.mouseUpEvent = function() {
     // Get the user selected content and store in a var
     $scope.selectedText =  $scope.getSelectionText();

    //need a function to return the selected content but wrapped with <b></b>


};  

//Get selection range    
$scope.getSelectionText = function(){
  var userSelectedText = "";
  if (window.getSelection) {
      userSelectedText = window.getSelection().toString();
     $scope.myselectText = window.getSelection().toString();

       $scope.myselectText.replace ($scope.myselectText, 'yellow');

  } else if (document.selection && document.selection.type != "Control") {
      userSelectedText = document.selection.createRange().text;

  }


  return userSelectedText;
}  
1
Chris Tarasovs 15 janv. 2017 à 01:48

2 réponses

Meilleure réponse

Ceci est une solution super simple à votre question (en utilisant pure vanilla js)

Vous pouvez ajouter des écouteurs d'événements aux objets de deux manières.

En ajoutant l'écouteur à l'objet en HTML

<div id="myButton" onMouseUp="doSomething()"></div>

Ou depuis JavaScript

document.getElementById("myButton").addEventListener("mouseup", function(){
    //Do something when the mouse Up event happens.
});

Si vous souhaitez que JavaScript ajoute automatiquement les eventListeners au chargement de la page, vous pouvez utiliser ceci

 window.onload = function(){

     document.getElementById("myButton").addEventListener("mouseup", function(){ DO SOMETHING CODE HERE; });

 }; 

RÉSOLUTION DE VOTRE EXEMPLE

HTML

<div id="SampleText" onMouseUp="captureText()">Please select this text</div>

Javascript

function captureText() {
 var text = "";

 if (window.getSelection) {
   text = window.getSelection().toString();
 } else if (document.selection && document.selection.type !== "Control") {
   text = document.selection.createRange().text;
 }

 return text;
 //or pass text to a function for it to be used useText(text);
}//End function

MISE À JOUR:

Si vous souhaitez capturer le texte sélectionné de la page entière, vous devrez envelopper la page entière dans un wrapper et ajouter le evenListener au wrapper.

<div id="PageWrapper" onMouseUp="captureText()">
  //All Page content goes here
</div><!-- End PageWrapper -->
2
Sgnl 15 janv. 2017 à 01:32

Pour Angular, vous avez ng-mouseup Voici un exemple sur la façon dont vous faites en angulaire

HTML

<div ng-mouseup="getSelectedText()">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit lacus gravida augue mattis, quis auctor ex pulvinar.

</div>

<div ng-bind="showSelections"></div>

SCRIPT

function myCtrl($scope){
   $scope.getSelectedText = function(){
      $scope.showSelection = $scope.getSelectionText();
   };
   $scope.getSelectionText = function() {
      var selectedText = "";
      if (window.getSelection) {
          selectedText = window.getSelection().toString();
      } else if (document.selection && document.selection.type != "Control") {
          selectedText = document.selection.createRange().text;
      }
      return selectedText;
   };
}
0
Chris Tarasovs 14 janv. 2017 à 23:30