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

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.