-3

Ejemplo, tengo lo siguiente:

192.168.1.2

Quiero extraer cada octeto de la IP de un input diferente.

He intentado lo siguiente:

<script>

                    function extraer_ip(){
                  if($("#action").val() == "edit" ){
                    //capturar la ip completa en editar y extraer valor por separado    
                     var ip_equipo = $("#ip_equipo").val();
                     var ip = ip_equipo.split(".");
             
                      $("#ip_1").val(ip[0]);  
                      $("#ip_2").val(ip[1]);  
                      $("#ip_3").val(ip[2]);  
                      $("#ip_4").val(ip[3]);  
                  }
                }
                extraer_ip();
</script>
1
  • Intenta con split('.') y, por favor, edita la pregunta para agregar el código que no te funciona.
    – Triby
    Commented el 9 jul. 2020 a las 15:41

2 respuestas 2

2

Podemos proceder de esta forma:

  • Hacer uso de split para descomponer el string donde se almacena la IP por el símbolo que aparece en común que es el .
  • A los inputs donde quieres asignar cada octeto de la IP le damos una clase en común
  • Recuperamos en 2 variables a:
    • la dirección IP
    • Los 4 inputs por medio del método querySelectorAll()
  • Por medio de un ciclo for iteramos desde 0 hasta una iteración cuyo valor sea menor a la lontitud de los 4 inputs recuperados previamente en la variable segmentos
  • Por dentro del ciclo for para asignar valores a los inputs indicamos con esta sintaxis: segmentos[inicio].value
  • Ahora para asignar el valor al atributo value y tomar cada octeto de forma dinámica lo indicamos por medio de: IP_ADDRESS[inicio]
    • De esta manera nos evitamos el paso que estás haciendo en tu código que es indicar de forma manual el índice dentro del vector que ocupa cada elemento con esto: $("#ip_1").val(ip[0]);

Código:

      <div class="octetos">
        <input type="text" class="octeto">
        <input type="text" class="octeto">
        <input type="text" class="octeto">
        <input type="text" class="octeto">
      </div>
    <script>
        const IP_ADDRESS = '192.168.1.2'.split('.');
        const segmentos  = document.querySelectorAll('.octeto');

        for(let inicio = 0; inicio<segmentos.length; inicio++) {
          segmentos[inicio].value = IP_ADDRESS[inicio];
        }    
    </script>

1

Tambien puedes hacerlo con jquery de la siguiente forma:

var ip = '192.168.1.2';
var div = ip.split('.');
var output = ""
for (var element of div) {
  output += '<input type="text" value="' + element + '"><br>';
};
$(document).ready(function() {
  $('#output').append(output);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>IP Address:</p>
<div id="output"></div>

De esta forma, si tienes un ip con un dato menos o mas por alguna razon, creara un input dinamicamente ya que los inputs se van agregando dependiendo de los valores separados por el punto.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.