[SOLUCIONADO] Eliminar texto desde coma (incluida)

[JUMASOL]

Hola.

Tengo este div que se rellena con un autoformulario de Google.

Código:

<div class="field">
A Coruña, Galicia, España
</div>

Sólo debe mostrarse la primera palabra, y eliminar todo desde la primera coma incluida ella misma.

El class está dentro de otros y está ya identificado así:

document.querySelector('.form4 .group .field')

¿Se os ocurre cómo seguir para dejar sólo "A Coruña" dentro del div?

Gracias.

[mpozo]

Puedes hacerlo con el método split() https://developer.mozilla.org/es/doc...s/String/split

[AngelKrak]

http://codepen.io/anon/pen/RoGYmd?editors=1010
ahi te hice el ejemplo ;)

[mpozo]

Eso es. Sólo un apunte. En lugar de usar innerHTML ex más conveniente usar textContent

[JUMASOL]

Funciona de maravilla.

Pero ahora tengo un problema a la hora de aplicarlo a la página, porque la estructura indicada es sólo el final de un identificador específico de clase. Así por ejemplo:

Código:

<div class="field-especifico">
  <div class="field-b">
     <div class="field">
        A Coruña, Galicia, España
     </div>
  </div>
</div>

He utilizado esta modificación:

Código:

var field = document.querySelector("field-especifico .field-b .field").textContent;
var field2 = field.split(",", 1);

document.querySelector(".field").textContent = field2;

El problema es que esa estructura se repite a lo largo del sitio, y el elemento a sustituir no está en la primera instancia.

Inserto el código y me encuentro con que no sustituye nada, y después de un repaso de toda la página veo que "A Coruña" está metido sustituyendo el contenido del primer juego de divs, mucho más arriba en la página, quedando así.

Código:

  <div class="field-b">
     <div class="field">
        A Coruña
     </div>
  </div>

Por lo que tengo aprendido, querySelector sólo selecciona la primera instancia, así que ese es el problema. En otra parte de la web utilicé un sistema parecido para sustituir palabras con un localización muy precisa para exactamente la misma estructura utilizando querySelectorAll, así:

Código:

querySelectorAll('.field-especifico .field-b .field');

Así puedo localizar el div concreto distintivo (en este caso field-especifico).

Por alguna razón no me funciona esta vez.

¿Me podéis decir dónde falla?

[mpozo]

No se tienes problemas con los selectores o con el nodeList. Me inclino por este segundo.
Con querySelectorAll se obtiene un nodeList y cada elemento de esta lista debe de ser accedido por su indice de manera "estática o dinámica". Supongamos que tienes este html

Código HTML:

<div>hola</div>
<div>cómo</div>
<div>estás</div>
 

Para acceder a cada elemento de manera estática

Código Javascript:

var divs = document.querySelectorAll('div'),
div1 = divs[0].textContent,
div2 = divs[1].textContent,
div3 = divs[2].textContent;
console.log(div1 + ' ' + div2 + ' ' + div3);
 

De manera dinámica

Código Javascript:

[].forEach.call(document.querySelectorAll('div'), function(elem) {
console.log(elem.textContent);
});
 

[JUMASOL]

Hola a todos.

Acabo de comprobar que en este caso no es necesaria la especificación completa, sino que basta con indicar el div distintivo para que se apliquen las variables de forma correcta.

Sólo hace falta esto:

Código:

var field = document.querySelector("field-especifico").textContent;
var field2 = field.split(",", 1);

document.querySelector(".field").textContent = field2;

En cualquier caso, esto me ha servido para hacer un cierto estudio de querySelector y querySelectorAll, así como sobre la diferencia entre innerHTML y textContent según las valiosas aclaraciones de mpozo.

Gracias a todos.

[JUMASOL]

Hola.

Volviendo al tema de la repetición de clases a lo largo del documento, he intentado aplicar esto:

Código:

function myFunction() {
    var field = document.querySelectorAll(".field-especifico").innerHTML;
    var field2 = field.split(",", 1);
    var i;
    for (i = 0; i < field.length; i++) {
        field[i].innerHTML = field2;
    }
}

Sin resultados. Ahora mismo estoy intentando ver por qué no funciona, ni siquiera en la primera instancia, pero si alguien puede hacerme una indicación se lo agradecería.

[JUMASOL]

Hola a todos.

Acabo de comprobar que en este caso no es necesaria la especificación completa, sino que basta con indicar el div distintivo para que se apliquen las variables de forma correcta.

Sólo hace falta esto:

Código:

var field = document.querySelector(".field-especifico");
var field2 = field.split(",", 1);

document.querySelector(".field").textContent = field2;

En cualquier caso, esto me ha servido para hacer un cierto estudio de querySelector y querySelectorAll, así como sobre la diferencia entre innerHTML y textContent según las valiosas aclaraciones de mpozo.

Gracias a todos.

[alvaro_trewhela]

Estas tomando el queryselectorall como un solo valor, es un arreglo, ve como andas con esto:

Código Javascript:

function myFunction() {
var field = document.querySelectorAll(".field-especifico");
    for(var k=0;k<field.length;k++){
    field2 = field[k].split(",");
    field[k].innerHTML = field2[0];
    }
}
 

[JUMASOL]

Hola Álvaro.

Tampoco me funciona. Ni siquiera con el primer selector.

[alvaro_trewhela]

Eso pasa por hacer las cosas a la rápida:

Código Javascript:

function myFunction() {
var field = document.querySelectorAll(".field-especifico");
    for(var k=0;k<field.length;k++){
    field2 = field[k].innerHTML.split(",");
    field[k].innerHTML = field2[0];
    }
}
 

edito:

más fácil aun:

Código Javascript:

function myFunction() {
var field = document.querySelectorAll(".field-especifico");
    for(var k=0;k<field.length;k++){
    field[k].innerHTML = field[k].innerHTML.split(",")[0];
       }
}
 

[JUMASOL]

Tampoco funciona, ni uno ni otro.

Puedes probarlo aquí:

http://codepen.io/anon/pen/RoGYmd?editors=1010

A mí no me funciona.

[alvaro_trewhela]

raro a mi sí, limpia caché talvez?

[JUMASOL]

No, eso no es. ¿Lo has probado en CodePen?

[alvaro_trewhela]

No man.
Ojo estoy trabajando con

Código HTML:

<div class="field-especifico">valores1</div>
<div class="field-especifico">valores2</div>
...
<div class="field-especifico">valoresN-1</div>
<div class="field-especifico">valoresN</div>
 

El problema es que estas usando ", " yo estabá usando ","

Código Javascript:

function myFunction(){
var field = document.querySelectorAll(".field-especifico");
    for(var k=0;k<field.length;k++){
    field[k].innerHTML = field[k].innerHTML.split(", ")[0];
    }
}
 

ahí debería andar

[mpozo]

Iniciado por JUMASOL

Hola.

Volviendo al tema de la repetición de clases a lo largo del documento, he intentado aplicar esto:

Código:

function myFunction() {
    var field = document.querySelectorAll(".field-especifico").innerHTML;
    var field2 = field.split(",", 1);
    var i;
    for (i = 0; i < field.length; i++) {
        field[i].innerHTML = field2;
    }
}

Sin resultados. Ahora mismo estoy intentando ver por qué no funciona, ni siquiera en la primera instancia, pero si alguien puede hacerme una indicación se lo agradecería.

Ya está explicado aquí http://www.forosdelweb.com/f13/elimi...7/#post4808604

[JUMASOL]

Si te refieres a esto:

Código:

<div class="field-especifico">valores1, ggg</div>
<div class="field-especifico">valores2, bbbb</div>
...
<div class="field-especifico">valoresN-1, nnn</div>
<div class="field-especifico">valoresN, ggg</div>

Código:

function myFunction(){
var field = document.querySelectorAll(".field-especifico");
    for(var k=0;k<field.length;k++){
    field[k].innerHTML = field[k].innerHTML.split(", ")[0];
    }
}

No elimina nada.

Lo del punto #6 ya está mirado, pero no lo aplico bien, o hay algún problema que no consigo ver.

[mpozo]

No veo ningún error en el código que muestras. El error debe estar el que no muestras o no está. Se me ocurre que estés invocando la función antes de que el dom esté cargado. Si te funciona este, entonces ese es el problema

Código Javascript:

<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
        <style>
 
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', myFunction, false);
 
            function myFunction(){
 
                [].forEach.call(document.querySelectorAll('.field-especifico'), function(elem) {
                    elem.textContent = elem.textContent.split(',', 1);
                });
            }
        </script>
    </head>
    <body>
<div class="field-especifico">valores1, ggg</div>
<div class="field-especifico">valores2, bbbb</div>
...
<div class="field-especifico">valoresN-1, nnn</div>
<div class="field-especifico">valoresN, ggg</div>
    </body>
</html>
 

[alvaro_trewhela]

Mira, duramente lo estoy probando así:

Código HTML:

<script type="text/javascript">
function myFunction(){
var field = document.querySelectorAll(".field-especifico");
    for(var k=0;k<field.length;k++){
    field[k].innerHTML = field[k].innerHTML.split(",")[0];
    }
}
</script>
    
<div class="field-especifico">hola,asd,dkd</div>
<div class="field-especifico">chao,eif9,fkd</div>
<div class="field-especifico">ch32903o,sklseif9,398383fkd</div>
<input type="button" onclick="myFunction();" value="Cambiar" />
 

Y me corre, si no te corre ni ídea

[JUMASOL]

He combiando ambas soluciones en esto:

Código:

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', myFunction, false);
function myFunction(){
var field = document.querySelectorAll(".field-especifico");
for(var k=0;k<field.length;k++){
field[k].innerHTML = field[k].innerHTML.split(",")[0];
}
}
</script>

Y funciona.

Tu propuesta, mpzo, me hacía un efecto de borrarme todos los divs dentro de .field-especifico. Me dejaba esto:

Código:

<div class="field-especifico">
  <div class="field-b">
     <div class="field">
        A Coruña, Galicia, España
     </div>
  </div>
</div>

Así:

Código:

<div class="field-especifico">

        A Coruña

</div>

No comprendo exactamente el porqué. Pero no puede ser, porque "A Coruña" tiene unos estilos por css muy concretos por asociación de field-b y field, que luego se repiten en otras partes del sitio sin relación con este problema.

Esta vez sí que está solucionado.

Un gran saludo.

[mpozo]

Sí, eso ocurre por que no recordaba la estructura. Se trata de cambiar textContent por innerHTML. Lo que no entiendo o quizás no he leído con detenimiento es por qué usas como selector de referencia field-especifico, en lugar de field con lo que resuelves el problema que tenías aquí

Código Javascript:

<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
        <style>
 
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', myFunction, false);
 
            function myFunction(){
 
                [].forEach.call(document.querySelectorAll('.field'), function(elem) {
                    elem.textContent = elem.textContent.split(',', 1);
                });
            }
        </script>
    </head>
    <body>
 
<div class="field-especifico">
  <div class="field-b">
     <div class="field">
        A Coruña, Galicia, España
     </div>
  </div>
</div>
 
 
<div class="field-b">
     <div class="field">
        A Coruña, Galicia, España
     </div>
</div>
 
 
 
<div class="field-especifico">
     <div class="field">
        A Coruña, Galicia, España
     </div>
</div>
 
 
 
<div class="field">
        A Coruña, Galicia, España
</div>
 
 
    </body>
</html>