Discussion :

[gtraxx]

Bonjour à tous, je me pose une question concernant la comparaison de chaine.
Je créer deux textarea ou div avec comme contenu deux textes, je souhaite pouvoir faire une comparaison et dire les mots qui ont été changé avec une surbrillance de ses même mots.
Bien sur tout doit être pris en compte par exemple:

mon chien est bleuté

Si dans l'autre div on lit.

mon chien est bleute

On doit alors mettre en surbrillance, le mot bleute, seulement je ne vois pas du tout comment faire sa .
Une idée ?
Peut être doit on s'aider de php mais la franchement je coince

[Invité]

salut,

donc j'imagine qu'on parle de mots. Donc, on est pas au caractère pres, mais au mot pres.
Un mot, c'est définit par une liste de caractères, excepté ceux qui servent à la ponctuation, ainsi que les chiffres.
Une idée, ca peut donc etre de :
pour chaque textarea :
capturer chaque mot dans une liste.
On peut pour ca utiliser une regex :
On capture la premiere occurrence d'un [a-zA-Zéè]*, puis on place le curseur apres le mot qu'on a capturé, puis on rapplique la regex, et ce jusqu'a ce qu'on arrive a la fin de la chaine.


Enfin, il reste à comparer les elements de chaque liste 2 a 2.

[gtraxx]

C'est plus ou moins sa, seulement comment appliqué la regex après chaque mot.
Je n'arrive pas à bien démarrer, une base m'aiderai pour faire cette regex un peu particulière sur une série de mot

[Invité]

salut,

voila une sol :

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
 
var chaine="arbre;::,oui$^3 autre,autre2testament"
 
//le delimiteur, c'est tout ce qui est pas une lettre
var reg=new RegExp("[^a-zA-Z]+", "g");
 
//ca nous fait des tableaux de mots
var tableau=chaine.split(reg);
 
//on affiche
for (var i=0; i<tableau.length; i++) {
 document.write(tableau[i] + "<br/>");
}
 
 
//affiche  : 
/* 
arbre
oui
autre
autre
testament 
*/

[gtraxx]

J'essaie de faire un plugin mais il n'affiche rien

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
(function($) {
	$.fn.diffString = function(options){
		var defaults = $.extend({
			oldText:'',
			newText:'',
			debug:false
		}, options);
		var opts = $.extend(defaults, options);
		/**
		*
		* Function for log in console or alert
		*
		*/
		function log(s) {
				if (typeof console != "undefined" && typeof console.debug != "undefined") {
					console.log(s);
				} else {
					alert(s);
				}
		}
		function escape(s) {
		    var n = s;
		    n = n.replace(/&/g, "&");
		    n = n.replace(/</g, "&lt;");
		    n = n.replace(/>/g, "&gt;");
		    n = n.replace(/"/g, "&quot;");
 
		    return n;
		}
		function diffString( o, n ) {
			  o = o.replace(/\s+$/, '');
			  n = n.replace(/\s+$/, '');
 
			  var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
			  var str = "";
 
			  var oSpace = o.match(/\s+/g);
			  if (oSpace == null) {
			    oSpace = ["\n"];
			  } else {
			    oSpace.push("\n");
			  }
			  var nSpace = n.match(/\s+/g);
			  if (nSpace == null) {
			    nSpace = ["\n"];
			  } else {
			    nSpace.push("\n");
			  }
 
			  if (out.n.length == 0) {
			      for (var i = 0; i < out.o.length; i++) {
			        str += '<del>' + escape(out.o[i]) + oSpace[i] + "</del>";
			      }
			  } else {
			    if (out.n[0].text == null) {
			      for (n = 0; n < out.o.length && out.o[n].text == null; n++) {
			        str += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
			      }
			    }
 
			    for ( var i = 0; i < out.n.length; i++ ) {
			      if (out.n[i].text == null) {
			        str += '<ins>' + escape(out.n[i]) + nSpace[i] + "</ins>";
			      } else {
			        var pre = "";
 
			        for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++ ) {
			          pre += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
			        }
			        str += " " + out.n[i].text + nSpace[i] + pre;
			      }
			    }
			  }
 
			  return str;
			}
 
			function randomColor() {
			    return "rgb(" + (Math.random() * 100) + "%, " + 
			                    (Math.random() * 100) + "%, " + 
			                    (Math.random() * 100) + "%)";
			}
			return diffString(opts.oldText,opts.newText).html();
	}
})(jQuery);
$('.test').diffString("Le machin chouette vert.","Le machin chouette rouge avec du vert" );

invalid object initializer

Ensuite il faut que je puisse afficher les différences dans deux div différente pour plus de clarté.
Donc on verrai les deux textes avec les modifications barrer , surligner dans les deux div