0

Esto es una pregunta de seguimiento. Deseo seleccionar dos palabras de mi frase: "tecnología" y "gusta". La frase completa está alojada en un arreglo, la primera palabra está en el índice 1 y la otra en el último indice (el 3). Para que esto funcione, mi bucle debe iterar por todos los elementos, cuando pase por alguno de ellos debe detenerse y transformar el texto en negrita.

<span id="frase">la tecnologia me gusta</span>
<button onclick="evidenciar()">evidenciar</button>

<script type="text/javascript">

    frase = document.querySelector("#frase").innerHTML;

    dividiFrase = frase.split(/\s/)  // ["la", "tecnologia", "me", "gusta"]

    function evidenciar () {

        for (x = 0; x < dividiFrase.length; x++) {

            if (dividiFrase[x] == dividiFrase[1]) {
                elemento.innerHTML = dividiFrase[1]+ "<strong>" + dividiFrase[1]+ "</strong>";
            }

            if (dividiFrase[x] == dividiFrase[3]) {
                elemento.innerHTML = dividiFrase[3]+ "<strong>" + dividiFrase[3]+ "</strong>";
            }

        }

    } 

</script>

recibo solo el ultima palabra, porque mi segundo if lo sobreescribe, deseo que se muestre todo el texto con tecnologia y gusta en negrita

5
  • Sería bueno mencionar que esta es una pregunta de seguimiento de es.stackoverflow.com/questions/65172/… y que aplicaras a esta lo aprendido en aquella.
    – Rubén
    Commented el 25 abr. 2017 a las 20:41
  • si, pero los condicionales no me funcionan
    – steven
    Commented el 25 abr. 2017 a las 20:42
  • ¿En qué sentido no funcionan? Si ocurre un error, deberías mencionar este textualmente.
    – Rubén
    Commented el 25 abr. 2017 a las 20:43
  • lo estoy probando en una pagina que prueba codigo online y no me aparece ningun error en consola
    – steven
    Commented el 25 abr. 2017 a las 20:50
  • 1
    Este sitio cuenta con su propia herramienta para probar código Javascript/HTML/CSS, algunos le llaman "stacksnippets". En la siguiente respuesta, puse una captura de pantalla -> es.meta.stackoverflow.com/a/1450/65
    – Rubén
    Commented el 25 abr. 2017 a las 21:08

2 respuestas 2

1

Existen varias formas de hacerlo, unas consumen mas recursos del equipo/servidor que otras. Sabiendo la posición donde quieres acceder es un poco más rápido, te pongo algunos ejemplos:

<h3>Frase:</h3>
<div id="text1"></div>
<div id="text2"></div>
<div id="text3"></div>

<script>

    /* ====================================
    Utilizando otro arreglo como referencia de forma dinámica
    ======================================= */
    function printText1()
    {

        //Array de la frase
        var arr = ["la", "tecnologia", "me", "gusta"];

        //Array de referencia
        var selects = ["tecnologia", "gusta"];

        //Texto a imprimir
        var txt = "";

        //Recorrer las posiciones de la frase
        for( i in arr ){

            //Recorrer las posiciones del array de referencia
            for( e in selects ){

                //Comparar si la posicion del arreglo de referencia es igual a la
                //posicion del arreglo de la frase
                if( selects[e] == arr[i] ){

                    //Reemplazar el arreglo de la fase que coincidan
                    arr[i] = "<b>" + arr[i] + "</b> ";

                }

            }


        }

        //Recorrer el arreglo de la frase
        for( i in arr ){

            //Por cada posicion del arreglo de la frase, se inyecta en la variable a imprimir
            txt += arr[i] +" ";

        }

        //Se imprime la variable con el texto generado
        document.querySelector("#text1").innerHTML = txt;

    }

    /* ====================================
    Utilizando otro arreglo como referencia de forma estática
    ======================================= */
    function printText2()
    {
        //Array de la frase
        var arr = ["la", "tecnologia", "me", "gusta"];

        //Array de referencia
        var selects = [1, 3];

        //Texto a imprimir
        var txt = "";

        //Acceder al arreglo de la frase y buscar la primer referencia que se encuentre [0]
        arr[ selects[0] ] = "<b>" + arr[ selects[0] ] + "</b>";

        //Acceder al arreglo de la frase y buscar la segunda referencia que se encuentre [1]
        arr[ selects[1] ] = "<b>" + arr[ selects[1] ] + "</b>";

        //Recorrer el arreglo de la frase
        for( i in arr ){

            //Por cada posicion del arreglo de la frase, se inyecta en la variable a imprimir
            txt += arr[i] +" ";

        }

        //Se imprime la variable con el texto generado
        document.querySelector("#text2").innerHTML = txt;
    }

    /* ====================================
    Accediendo directamente a la posicion del arreglo
    ======================================= */
    function printText3()
    {
        //Array de la frase
        var arr = ["la", "tecnologia", "me", "gusta"];

        //Texto a imprimir
        var txt = "";

        //Acceder directamente a la posicion del arreglo
        arr[ 1 ] = "<b>" + arr[ 1 ] + "</b>";

        //Acceder directamente a la posicion del arreglo
        arr[ 3 ] = "<b>" + arr[ 3 ] + "</b>";

        //Recorrer el arreglo de la frase
        for( i in arr ){

            //Por cada posicion del arreglo de la frase, se inyecta en la variable a imprimir
            txt += arr[i] +" ";

        }

        //Se imprime la variable con el texto generado
        document.querySelector("#text3").innerHTML = txt;

    }

    printText1();
    printText2();
    printText3();

</script>
2
  • muchas gracias colega, te falto especificar cual de los tres metodos consume mas recursos, el resto esta todo bien, aunque se me hace dificil entender lo que hace tu codigo, debiste haberlo dividido, en tres partes de codigo, si no fuera por la columna inutil de preguntas relacionadas se podria visualizar sin laas barras, de todos modos te agradesco mucho, tu respuesta si es completa!
    – steven
    Commented el 26 abr. 2017 a las 23:05
  • De nada viejo, espero te sirva de algo y entre más arreglos deba recorrer el JS, más consumo de memoria (RAM) va a realizar, por ende la función printText1 consume más recurso. Respecto a separar los métodos, cada función equivale a un método diferente (: Commented el 27 abr. 2017 a las 4:38
0

Si la frase es conocida, y las posiciones de las palabras a aplicar negritas son conocidas, el código se puede simplificar. A continuación una forma de hacerlo

frase = document.getElementById("frase"); //seleccionar elemento
fr = frase.innerHTML.split(' '); //Separar el texto del elemento en palabras
fr[1] = '<b>' + fr[1] + '</b>'; //Aplicar negritas a la 2da palabra
fr[3] = '<b>' + fr[3] + '</b>'; //Aplicar negritas a la 4ta palabra
//Unir el texto y reemplazar el texto original del elemento.
frase.innerHTML = fr.join(' '); 
<span id="frase">La tecnología me gusta</span>

3
  • funciona, pero no entiendo porque le pasas un espacio vacio a la funcion split y join, que sentido tiene hacerlo
    – steven
    Commented el 25 abr. 2017 a las 21:51
  • @steven: Sin el espacio "no funciona". Pruébalo y verás. Los detalles en split y join
    – Rubén
    Commented el 25 abr. 2017 a las 21:55
  • tu funcion split, hace lo mismo que mi variable dividiFrase, la unico que cambia son los parametros, acabo de comprobarlo, respecto a la funcion join todavia no me queda claro para que lo usas
    – steven
    Commented el 25 abr. 2017 a las 22:04

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.