Afficher le code html correspondant à la sélection de texte

**patricktoulon** · 05/03/2017, 03h22

bonsoir a tous
je voudrais savoir si c'est possible de voir dans un message le code html correspondant a la section de texte
j'ai trouvé plein de petite choses mais je n'arrive rien ,le seul qui me donne un résultat c'est le premier mais il me donne tout le contenu et non juste la sélection

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function voir(){
var mySelection  = window.getSelection().getRangeAt(0).commonAncestorContainer ;// donne le div tout entier
//var mySelection  = window.getSelection().getRangeAt(0).anchorNode ;// marche pas
//var mySelection  = window.getSelection().createRange().parentElement() ;//marche pas
//var  mySelection =window.getSelection().anchorNode;/////undefined
var mySelection=window.selection.createRange()).htmlText;//marche pas 
alert(mySelection.outerHTML);
}

**Beginner.** · 06/03/2017, 14h39

Moi aussi j'ai voulu étudier ce genre de chose notamment pour faire ce dont on a parlé dans l'autre fil (sur la suppression d'un formatage spécifique...)...

Sur l'autre fil tu utilises des fonctions qui ne sont pas loin de te donner la réponse à ta question...

Voici un exemple que tu peux tester ici : http://jsbin.com/baxigafumi/edit?js,output

Regarde la fonction getHtmlOfSelection()...

**patricktoulon** · 06/03/2017, 14h49

bonjour beguinner

je vais aller voir mais j'ai trouver comment récupérer le code html de la sélection sans faire un newbalise appendchil (selection)

en fait je le fait mais avec un clone

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 var mySelectionhtml  =window.getSelection().getRangeAt(0).cloneContents(); var newNode  = document.createElement("SPAN");
 //newNode.style.textShadow = '0px 0px 10px '+coul;
 newNode.appendChild(mySelectionhtml);
 
alert(newNode.innerHTML);

et voila comme ca de cette façon ca n'extrait pas la sélection quand je appendchild
je vais quand meme aller voir
en tout ca le fait ne ne pas extraire la selction et de delete apres toute la range ca ne me petarde plaus les doublons avant la newbalise
voila un brouillon je suis parti sur l'idée de badaze maisen html a l’intérieur
j'ai fait ca apart dans un new fichier pour ne travailler que sur satané fonction shadow

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
html><head>
  <meta http-equiv="X-UA-Compatible" content="IE=10">
<style type="text/css">
<!--
.editor    {font-family:tahoma}
.actionbar {background-color:#c0c0c0;border:1px solid black}
.comment   {border:2px dotted red}
-->
</style>
<script>
function Shadowcolor(coul,MOD) {
 var mySelection  = window.getSelection();
 var mySelectionhtml  =window.getSelection().getRangeAt(0).cloneContents(); 
var newNode  = document.createElement("SPAN");
 //newNode.style.textShadow = '0px 0px 10px '+coul;
 newNode.appendChild(mySelectionhtml);
var str=newNode.innerHTML;
var f=newNode.getElementsByTagName("SPAN");
 
 
if(f.length>0){
 
 
for(var i=0;i<f.length;i++){
console.log(f[i].style.textShadow);
str=str.replace(f[i].outerHTML,f[i].innerHTML);
}
}
newNode.innerHTML=str;
 
 
var xxxx                 = mySelection.getRangeAt(0);
   xxxx.deleteContents();
    xxxx.insertNode(newNode);   
 
  if(newNode.parentElement.tagName!="P"){
   p=newNode;
    do{p=p.parentElement;}while(p.tagName!="P");
   }
   var nb=p.getElementsByTagName("*").length;
     var sp=p.getElementsByTagName("*");
for(var e=0;e<nb*2;e++){
   for (var i=sp.length;i>=0;i--){
      if(sp.innerHTML==""){sp.parentElement.removeChild(sp);}
      }     
 }
 
 
if (MOD==true){ newNode.style.textShadow = '0px 0px 10px '+coul;}
if (MOD==false){ 
 
 
 
 
 
 
if(newNode.parentElement.tagName=="SPAN"){newNode.style.textShadow = "none";}
//if(newNode.parentElement==p.Chidren[0] && p.firstChild.tagName="FONT" && MOD==false){p.innerHTML=p.innerHTML.replace(newNode.outerHTML,newNode.innerHTML);}
}
p.innerHTML=p.innerHTML.replace(/<\/strong><strong>/gi,"");
p.innerHTML=p.innerHTML.replace(/<\/em><em>/gi,"");
 
 
alert(p.outerHTML);
 
 
 document.getElementById('comment').focus();
}
 
 
 
 
 
 
 
 
 
 
function voir(){
var mySelectionhtml  =window.getSelection().getRangeAt(0).cloneContents(); 
var newnode=document.createElement("FONT")
newnode.appendChild(mySelection)
alert(newnode.mySelectionhtml);
}
 
 
</script>
</head>
<body>
    <div id="comment" class="comment" contenteditable>
 
 
 
 <p><font size=5>teste de <strong>te<font color=red><em>xt</em>e</font></strong> shadow</font></p>
 
 
 
 
 
 
 </div>
    <br />
 <input type="button" id="shadow" value="shadowblack" onclick="Shadowcolor('black',true)"/> 
 <input type="button" id="shadow2" value="shadowred" onclick="Shadowcolor('red',true)"/> 
<input type="button" id="shadow2" value="shadowblue" onclick="Shadowcolor('blue',true)"/> 
<input type="button" id="shadow2" value="shadowmagenta" onclick="Shadowcolor('magenta',true)"/> 
<input type="button" id="shadow3" value="retir" onclick="Shadowcolor('rien',false)"/> 
<input type="button" id="shadow3" value="voir interieur" onclick="voir('')"/> 
<input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)"/>
</body>
</html>

**Beginner.** · 06/03/2017, 14h55

Envoyé par patricktoulon

et voila comme ca de cette façon ca n'extrait pas la sélection quand je appendchild

Oui c'est aussi ce que j'ai fait, j'ai même mis un commentaire...

**patricktoulon** · 06/03/2017, 15h09

re
oui bon ben on fait pareil en fait

**Beginner.** · 06/03/2017, 15h18

Oui mais au moment où je t'ai répondu je ne savais pas qu'entre temps tu avais trouvé une réponse donc j'ai posté ma réponse...

**patricktoulon** · 06/03/2017, 15h21

re
c'est pas grave tu m'aide beaucoup
et j'ai une autre idéee aussi mais c'est une entourloupette a la patricktoulon
je peut le faire avec execCommand qui fait tout le boulot tu te demande bien comment on peut faire surtout que execcommand(shadowcolor,x,y) n’existe pas hein ??!!!

Afficher le code html correspondant à la sélection de texte

JavaScript

Vue hybride

Discussions similaires

Partager

Partager