Digamos que una página web tiene una cadena como "Soy una cadena simple" que quiero encontrar. ¿Cómo haría esto usando JQuery?
Digamos que una página web tiene una cadena como "Soy una cadena simple" que quiero encontrar. ¿Cómo haría esto usando JQuery?
Respuestas:
jQuery tiene el método contiene. Aquí hay un fragmento para ti:
<script type="text/javascript">
$(function() {
var foundin = $('*:contains("I am a simple string")');
});
</script>
El selector anterior selecciona cualquier elemento que contenga la cadena de destino. El foundin será un objeto jQuery que contiene cualquier elemento coincidente. Consulte la información de la API en: https://api.jquery.com/contains-selector/
Una cosa a tener en cuenta con el comodín '*' es que obtendrá todos los elementos, incluidos los elementos html an body, que probablemente no desee. Es por eso que la mayoría de los ejemplos en jQuery y otros lugares usan $ ('div: contiene ("Soy una cadena simple")')
Normalmente, los selectores jQuery no buscan dentro de los "nodos de texto" en el DOM. Sin embargo, si usa la función .contents (), se incluirán nodos de texto, entonces puede usar la propiedad nodeType para filtrar solo los nodos de texto y la propiedad nodeValue para buscar la cadena de texto.
$ ('*', 'cuerpo') .andSelf () .contenido() .filter (function () { devuelve this.nodeType === 3; }) .filter (function () { // Solo coincide cuando contiene 'cadena simple' en cualquier parte del texto devuelve this.nodeValue.indexOf ('cadena simple')! = -1; }) .each (function () { // Haz algo con this.nodeValue });
.andSelf()
. De api.jquery.com/andSelf : "los objetos jQuery mantienen una pila interna que realiza un seguimiento de los cambios en el conjunto de elementos coincidentes. Cuando se llama a uno de los métodos de recorrido DOM, el nuevo conjunto de elementos se inserta en la pila. Si también se desea el conjunto de elementos anterior, .andSelf () puede ayudar ". No veo ningún contexto anterior, ¿qué me estoy perdiendo?
Esto seleccionará solo los elementos de hoja que contienen "Soy una cadena simple".
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).css("border","solid 2px red") });
Pegue lo siguiente en la barra de direcciones para probarlo.
javascript: $('*:contains("I am a simple string")').each(function(){ if($(this).children().length < 1) $(this).css("border","solid 2px red") }); return false;
Si quieres agarrar solo "Soy una cadena simple" . Primero envuelva el texto en un elemento como este.
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).html(
$(this).text().replace(
/"I am a simple string"/
,'<span containsStringImLookingFor="true">"I am a simple string"</span>'
)
)
});
y luego haz esto.
$('*[containsStringImLookingFor]').css("border","solid 2px red");
Si solo desea el nodo más cercano al texto que está buscando, puede usar esto:
$('*:contains("my text"):last');
Esto incluso funcionará si su HTML se ve así:
<p> blah blah <strong>my <em>text</em></strong></p>
El uso del selector anterior encontrará la <strong>
etiqueta, ya que es la última etiqueta que contiene toda esa cadena.
<p>my text <b>my text</b></p>
- eliminar a los antepasados de la <b>
etiqueta perder el otro partido
Eche un vistazo a resaltar (complemento jQuery).
Solo agregando a la respuesta de Tony Miller, esto me llevó al 90% hacia lo que estaba buscando pero aún no funcionó. Agregar .length > 0;
al final de su código hizo que mi script funcionara.
$(function() {
var foundin = $('*:contains("I am a simple string")').length > 0;
});
foundin += '*';
Esta función debería funcionar. básicamente realiza una búsqueda recursiva hasta que obtenemos una lista distinta de nodos hoja.
function distinctNodes(search, element) {
var d, e, ef;
e = [];
ef = [];
if (element) {
d = $(":contains(\""+ search + "\"):not(script)", element);
}
else {
d = $(":contains(\""+ search + "\"):not(script)");
}
if (d.length == 1) {
e.push(d[0]);
}
else {
d.each(function () {
var i, r = distinctNodes(search, this);
if (r.length === 0) {
e.push(this);
}
else {
for (i = 0; i < r.length; ++i) {
e.push(r[i]);
}
}
});
}
$.each(e, function () {
for (var i = 0; i < ef.length; ++i) {
if (this === ef[i]) return;
}
ef.push(this);
});
return ef;
}