Créer son propre Find/Replace en Javascript

Juste parce que ça fait bien de parfois réinviter la roue, je propose un code qui permet de rechercher le contenu d’un texte à l’intérieur d’un champ texte par exemple. J’en ai eu besoin alors que je recherchais le moyen de modifier le contenu d’un fichier XML depuis un champs texte sans passer par un éditeur.
 
L’idée est de disposer d’un bouton qui en cliquant dessus ouvrirait un popup contenant deux champs textes : 1 pour le contenu à recherche, l’autre pour le texte de remplacement.
 
Voici le code finale, suffisamment clair….Enfin j’espère 😀
 
Find / Replace pour les nuls
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 
// Find & Replace if (!window.txtFinder) txtFinder = {}; txtFinder.Editor = { 	selector: '#xmleditingDialog', 	getSelected : function() { 	  var userSelection, ta, t = ''; 	  if (window.getSelection && document.activeElement) { 		if (document.activeElement.nodeName == "TEXTAREA" || 			(document.activeElement.nodeName == "INPUT" && document.activeElement.getAttribute("type").toLowerCase() == "text")) { 			  ta = document.activeElement; 			  userSelection = ta.value.substring(ta.selectionStart, ta.selectionEnd); 			} else { 				userSelection = window.getSelection(); 			} 			t = userSelection.toString(); 		} else { 			if (document.getSelection){        				// all browsers, except IE before version 9 				userSelection = document.getSelection(); 				t = userSelection.toString(); 			} else if (document.selection){ 				// IE below version 9 				userSelection = document.selection.createRange(); 				t = userSelection.text; 			} 		}   	  return t; 	}, 	mouseup : function() { 	  var st = txtFinder.Editor.getSelected(); 	  if ( st != '') { 		$('#findTxt').val(st); 	  } 	}, 	movetoPosition : function (textarea, start, end) { 		if ( parseInt($.browser.version, 10) <=9 && textarea.createTextRange ) { 			// IE8 and IE9 			var range = textarea.createTextRange(); 			range.collapse(true); 			range.moveEnd('character', start); 			range.moveStart('character', end); 			range.select(); 		} else { 			// Chrome, Firefox, IE10 and earlier 			textarea.focus(); 			textarea.setSelectionRange(start,end); 		} 	}, 	find : function (searchTerm, case_sensitive) { 		if ( searchTerm != '' ) { 			txtAreaContent = $(txtFinder.Editor.selector + " textarea"); 			data_index = searchTerm + '_txtFinderIndex';   			// Highlight founded element 			searchIndex = $('body').data(data_index) != undefined ? parseInt( $('body').data(data_index) ): 0; 			startIndex = txtAreaContent.val().indexOf(searchTerm, searchIndex); 			alertMessage = ( searchIndex > 0 && startIndex == -1) ? 'Vous avez atteint la fin du document' : 'Non trouvé'; 			if ( startIndex > -1 ) { 				$('#findTab').find('p.alert').remove(); // Clear any feedback 				endIndex = searchTerm.length + startIndex; 				txtFinder.Editor.movetoPosition(document.getElementById('xmleditingcontent'), startIndex, endIndex); // Scroll to the element 				txtAreaContent.prop("selectionStart", startIndex); 				txtAreaContent.prop("selectionEnd", endIndex); 			} else { 				$('#findTab').find('p.alert').remove().end().append($('<p />').addClass('alert alert-info').text(alertMessage)); 				$('body').removeData(data_index); // Re-init index for current term 			} 			// Store new index for next click (on find button) 			$('body').data(data_index, startIndex + 1);  		} 	}, 	replace : function (searchTerm, replaceTerm, case_sensitive) { 		var txtAreaContent = $(txtFinder.Editor.selector + " textarea").val(), modifiers = 'g'; 		if (!case_sensitive) modifiers +='i'; 		pattern = new RegExp(searchTerm, modifiers); 		$(txtFinder.Editor.selector + " textarea").val( txtAreaContent.replace(pattern, replaceTerm) ); 	} }

Laisser un commentaire