2

Tengo un código sencillo, con el que planteo realizar una operación y al funcionar colocárselo a un cogido mas grande necesito colocar en un input lo que este antes de Precio: y Despues de " - " en tiempo real.

Por ejemplo en una cadena de texto que contiene "REFRESCO 2L HIT-NARANJA - COCACOLA Precio: 1500.00"

Yo deseo que la palabra COCACOLA, ya que es la marca del producto, se guarde en una variable para imprimirla en un input, pero se trata de guardar lo que esta después de " - " y antes de "Precio:"

Por ejemplo con el siguiente código logro obtener lo que esta antes de Precio:

const PrincAct = /\w+(?= Precio)/;
const palabra = m1.match(PrincAct)
document.getElementById(prinact).value = palabra;

El Problema radica, en puede existir en una cadena de texto lo siguiente "REFRESCO 2L NARANJA-ORANGE Precio: 1000.00" Se me guardar en mi input la palabra ORANGE y no quiero que esto suceda, pues ORANGE no es una marca registrada

Como dato adicional en mi cadena de texto existen 2 signos iguales "-" la diferencia es que uno esta separado por espacios. y este que esta separado por espacio es mi referencia a tomar para capturar la palabra que esta antes de Precio

Otro dato es que este código multiplica y totaliza el valor de precio.

Quiero lograrlo utilizando solo JavaScript

<!DOCTYPE html>
<html lang="es_ES">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript">

        var nextinput = 0;
        function AgregarCampos() {
            nextinput++;
            campo = '<li id="idLi' + nextinput + '">' +
        
           '<select id="txt' + nextinput + '" step="any" oninput="multiplicar(\'txt' + nextinput + '\',\'nmb' + nextinput + '\',\'acumu' + nextinput + '\',\'prinact' + nextinput + '\');" >' +
             '<option value="REFRESCO 2L HIT-NARANJA - COCACOLA Precio: 1500.00">REFRESCO 2L HIT-NARANJA - COCACOLA Precio: 1500.00</option>   ' +
             '<option value="REFRESCO 2L GOLDEN-NARANJA - PEPSICOLA Precio: 1200.00">REFRESCO 2L GOLDEN-NARANJA - PEPSICOLA Precio: 1200.00</option>   ' +
             '<option value="REFRESCO 2L NARANJA-ORANGE Precio: 1000.00">REFRESCO 2L NARANJA-ORANGE Precio: 1000.00"</option>   ' +
             '</select>' +
            '<input type="text" size="15" id="prinact' + nextinput + '" step="any"  oninput="multiplicar(\'txt' + nextinput + '\',\'nmb' + nextinput + '\',\'acumu' + nextinput + '\',\'prinact' + nextinput + '\');" />' +
            '<input type="number" size="15" id="nmb' + nextinput + '" step="any"    oninput="multiplicar(\'txt' + nextinput + '\',\'nmb' + nextinput + '\',\'acumu' + nextinput + '\',\'prinact' + nextinput + '\');" />' +
            '<input type="text" size="15"   id="acumu' + nextinput + '" step="any" class="monto"/></li>';

            $("#campos").append(campo);
        }
        function multiplicar(txt, nmb, acumu, prinact) {
            var m1 = document.getElementById(txt).value;
            var m2 = document.getElementById(nmb).value;

            const PrincAct = /\w+(?= Precio)/;
            const palabra = m1.match(PrincAct)
            document.getElementById(prinact).value = palabra;

            var P = /precio: (\d+)/i;
            var matchA = m1.match(P);
            var Price = parseInt(matchA[1]);
            r = Price * m2;
            document.getElementById(acumu).value = r;

            var total = 0;
            $(".monto").each(function () {
                if (isNaN(parseFloat($(this).val()))) {
                    total += 0;
                } else {
                    total += parseFloat($(this).val());
                }
            });
            document.getElementById('T').value = total;
        }
    </script>
</head>
<body>
    <form id="form" name="form" method="post">
         <div align="left">
    <a href="#" onclick="AgregarCampos();">Agregar Producto</a>
    <ul id="campos"></ul>
        <tr>
                <td>
                    Total
                </td>
                <td>
                    <input type="text" id="T" value="0" disabled>
                </td>
            </tr>
    </div>
    </form>
</body>
</html>

Agradezco los comentarios que puedan Darme para lograr lo que necesito?

4
  • Y para la tercera opción NARANJA-ORANGE ¿Qué marca debería aparecer? el 24 mar. 2021 a las 20:07
  • Debería quedar vació pues no consiguió coincidencia el 24 mar. 2021 a las 20:09
  • Entonces puedes usar esto /(?<= - )\w+(?= Precio)/, ya que la cadena a buscar debe de ir precedida por ' - ', para saber más puedes buscar Aserción de búsqueda inversa
    – Oscar GG
    el 24 mar. 2021 a las 20:14
  • @OscarG gracias por responder, pero eso que indicas no funciona, y estoy leyendo Aserción de búsqueda inversa para lograrlo el 25 mar. 2021 a las 12:00

2 respuestas 2

2

Teniendo en cuenta la estructura de tu string, podemos usar una expresión regular para obtener el precio

[0-9]{1,}(\.[0-9]{1,}?)$

Poniendo un punto y más números después como contenido opcional, ya que con solo [0-9]{1,}$ no hará match a 100.00

Luego de eso, vamos a separar el string con String.prototype.split para separar el string

str.split(string " ") : array

Evidentemente, si el primer elemento del array que nos da es igual al string completo, no hay marca

function processStr(s) {
    const sp = s.split(" - ");
    const p = s.match(/[0-9]{1,}(\.[0-9]{1,}?)$/)[0] - 0;
    // - 0 para convertirlo a número
    // Un string con un entero no se pueden restar y el resultado es un entero
    return sp[0] === s ? ["", p] : [sp[1].trim().split(" ")[0], p];
    // Operador ternario, equivalente a lo de abajo
    /*if (sp[0] === s) {
      return ["", p];
      // No hay marca
    } else {
      return [sp[1].trim().split(" ")[0], p];
    }*/
}

var nextinput = 0;

function AgregarCampos() {
    nextinput++;
    campo = '<li id="idLi' + nextinput + '">' +

        '<select id="txt' + nextinput + '" step="any" oninput="multiplicar(\'txt' + nextinput + '\',\'nmb' + nextinput + '\',\'acumu' + nextinput + '\',\'prinact' + nextinput + '\');" >' +
        '<option value="REFRESCO 2L HIT-NARANJA - COCACOLA Precio: 1500.00">REFRESCO 2L HIT-NARANJA - COCACOLA Precio: 1500.00</option>   ' +
        '<option value="REFRESCO 2L GOLDEN-NARANJA - PEPSICOLA Precio: 1200.00">REFRESCO 2L GOLDEN-NARANJA - PEPSICOLA Precio: 1200.00</option>   ' +
        '<option value="REFRESCO 2L NARANJA-ORANGE Precio: 1000.00">REFRESCO 2L NARANJA-ORANGE Precio: 1000.00"</option>   ' +
        '</select>' +
        '<input type="text" size="15" id="prinact' + nextinput + '" step="any"  oninput="multiplicar(\'txt' + nextinput + '\',\'nmb' + nextinput + '\',\'acumu' + nextinput + '\',\'prinact' + nextinput + '\');" />' +
        '<input type="number" size="15" id="nmb' + nextinput + '" step="any"    oninput="multiplicar(\'txt' + nextinput + '\',\'nmb' + nextinput + '\',\'acumu' + nextinput + '\',\'prinact' + nextinput + '\');" />' +
        '<input type="text" size="15"   id="acumu' + nextinput + '" step="any" class="monto"/></li>';

    $("#campos").append(campo);
}

function multiplicar(txt, nmb, acumu, prinact) {
    var m1 = document.getElementById(txt).value;
    var m2 = document.getElementById(nmb).value;

    const [palabra, r] = processStr(m1);
    document.getElementById(prinact).value = palabra;
    document.getElementById(acumu).value = r * m2;

    var total = 0;
    $(".monto").each(function() {
        if (isNaN(parseFloat($(this).val()))) {
            total += 0;
        } else {
            total += parseFloat($(this).val());
        }
    });
    document.getElementById('T').value = total;
}
<!DOCTYPE html>
<html lang="es_ES">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
    <form id="form" name="form" method="post">
         <div align="left">
    <a href="#" onclick="AgregarCampos();">Agregar Producto</a>
    <ul id="campos"></ul>
        <tr>
                <td>
                    Total
                </td>
                <td>
                    <input type="text" id="T" value="0" disabled>
                </td>
            </tr>
    </div>
    </form>
</body>
</html>

Si no es igual al string completo, obtenemos el segundo elemento del array el cual contendrá una plantilla así

(Marca) Precio: ....

Entonces, usamos String.prototype.trim para quitar espacios innecesarios al inicio y al final del segundo elemento del array, luego usamos String.prototype.split otra vez para separar el elemento por cada espacio, tendremos algo así

[
    "(Marca)",
    "Precio:",
    "....",
]

Y evidentemente el primer elemento del nuevo array será la marca

1
  • disculpa el tiempo en responder, tengo una duda en esta linea me marca error const [palabra, r] = processStr(m1); el error me lo da en los corchetes se coloca en rojo, Otra consulta debería funcionar aunque en vez de un select solo sea un input? ya que lo probe asi y no funciona el 25 mar. 2021 a las 12:35
0

Para que me dejara de marcar error en esta linea

const [palabra, r] = processStr(m1);

Solo quite los corchetes y la variable r quedando así:

const palabra = processStr(m1);

De esta manera tuve que agregar nuevamente mis variables para multiplicar

var P = /precio: (\d+)/i;
var matchA = m1.match(P);
var Price = parseInt(matchA[1]);
r = Price * m2;
document.getElementById(acumu).value = r;

En la funtion processStr(s) tuve que acomodar la linea que colocaste donde retorna pues si no lo hacia donde quiero que quede grabada COCACOLA, se visualizara también el precio estando así COCACOLA,1500.00

A esta Linea, le quite la variable p, para que no me trajera el valor numérico de precio

return sp[0] === s ? ["", p] : [sp[1].trim().split(" ")[0], p];

Quedando asi:

 return sp[0] === s ? [""] : [sp[1].trim().split(" ")[0]];

De esta manera ya no me marca error y hace lo que necesito.

Muchas Gracias anythingg

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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