Código de JavaScript - Buscar cadena en el DOM

Imágen de perfil

Buscar cadena en el DOMgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 20 de Octubre del 2016 por kip
1.328 visualizaciones desde el 20 de Octubre del 2016. Una media de 28 por semana
Funcion que permite hacer una busqueda en el DOM, exceptuando los elementos BUTTON e INPUT, hace un highlight de las coincidencias mientras se las escribe en el input con el atributo ID asignado, haciendo uso de expresiones regulares.

busc

Su uso es sencillo, colocar el codigo de la funcion al inicio del documento y al final llamar a la funcion enviando como parametro el atributo ID del input en donde se ingresara la busqueda.

1
2
3
<script type="text/javascript">
	searchDOM('busqueda');
</script>

wdodfMlncX

Saludos.

1.0
estrellaestrellaestrellaestrellaestrella(4)

Actualizado el 21 de Octubre del 2016 (Publicado el 20 de Octubre del 2016)gráfica de visualizaciones de la versión: 1.0
1.329 visualizaciones desde el 20 de Octubre del 2016. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
 
    var searchDOM = function (id_input) {
 
    	var strSearch = document.getElementById(id_input);
    	var objFind = document.body.children;
    	var elems = ['SCRIPT', 'BUTTON', 'INPUT'];
 
    	strSearch.onkeyup = function () {
    		var strSearchValue = this.value;
    		if (strSearchValue.length > 0 ){
    			search(strSearchValue);
    		} else {
    			search('', true);
    		}
    	}
 
    	var replacer = function (coincValues, content, nodeName = false) {
    		var returnValueFormat;
    		content = content.replace(/(<span style="background: yellow;">)([\w\s]+)(<\/span>)/g, '$2');
    		if (nodeName == 'P') {
    			content = content.replace(/(<p>)|(<\/p>)/g, '');
    		}
    		if (coincValues != false) {
    			for (var j =0; j < coincValues.length; j++) {
	    			var exp2 = new RegExp('('+coincValues[j]+')(?!>)', 'gi');
	            	returnValueFormat = content.replace(exp2, '<span style="background: yellow;">$1</span>');
	    		}
    		} else {
    			returnValueFormat = content;
    		}
    		return returnValueFormat;
        }
 
        var search = function (strSearchValue, reset = false) {
            var exp1 = new RegExp('('+strSearchValue+')', 'ig');
            var reset = reset;
            for (var i = 0; i < objFind.length; i++) {
            	if (elems.indexOf(objFind[i].nodeName) < 0) {
            		var coincValues = objFind[i].textContent.match(exp1);
	                if (coincValues != null && reset != true) {
	                    var formatedValue = replacer(coincValues, objFind[i].innerHTML, objFind[i].nodeName);
	                    objFind[i].innerHTML = formatedValue;
	                } else if (reset == true) {
	                	objFind[i].innerHTML = replacer(false, objFind[i].innerHTML, objFind[i].nodeName);
	                } else {
	                	objFind[i].innerHTML = replacer(false, objFind[i].innerHTML, objFind[i].nodeName);
	                }
            	}
            }
        }
 
    }
 
    </script>
</head>
<body style="text-align: center; width: 50%; margin-left: 25%;">
<label for="busqueda"><strong>BUSCAR</strong></label>
<br>
<input id="busqueda">
<br>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum Lorem dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum Lorem dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem
</p>
<div>
	<p>
	    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	    cillum Lorem dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	    Lorem
	</p>
	<p>
	    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	    cillum Lorem dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	    Lorem
	</p>
</div>
<ul>
	<li>
		PRUEBA 1
	</li>
	<li>
		PRUEBA 3
	</li>
	<li>
		PRUEBA 4
	</li>
	<li>
		PRUEBA 5
	</li>
	<li>
		PRUEBA 6
	</li>
</ul>
</body>
<script type="text/javascript">
	searchDOM('busqueda');
</script>
</html>



Comentarios sobre la versión: 1.0 (4)

Imágen de perfil
ScriptShow
20 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Práctico e interesante.
Responder
Imágen de perfil
xve
20 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Que bueno Kip!!! muy bueno!!!
Responder
Imágen de perfil
kip
20 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Muchas gracias Xve!
Responder
Imágen de perfil
Humberto
02 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
5 estrellas men lo guardare para ver comonfunciona excelente
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3720