Change letters of an html with function replace ()

Question

Change letters of an html with function replace ()

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (-1 votes)

4

I want to do something similar to what the lacuerda.net page does, where you have a music and you can turn it up or down tonality.

I have my test page where I want to change the tone of the music.

I've been testing with the function replace , but it only allows me to change a letter. I tried to put the function in the same jquery but the problem is that there are letters that I change them several times

Is there any way to check or prevent a letter from being changed 2 times in a single event?

$(document).ready(function() {

     $("#mas").click(function() {
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ C /g," D ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ D /g," E ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ E /g," F ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ F /g," G ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ G /g," A ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ A /g," B ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ B /g," C# ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ C# /g," D# ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ D# /g," F ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ F# /g," G# ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ G# /g," A# ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ A# /g," C ");
        });

    });


     $("#menos").click(function() {
            $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ Bb /g," Ab ");
        });

        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ C /g," Bb ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ D /g," C ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ E /g," D ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ F /g," Eb ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ G /g," F ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ A /g," G ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ B /g," A ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ Db /g," B ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ Eb /g," Db ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ Gb /g," E ");
        });
        $("body *").html(function(buscayreemplaza, reemplaza) {
            return reemplaza.replace(/ Ab /g," Gb ");
        });

    });

    $("#original").click(function() {
        location.reload(true)
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Al presionar el boton "+1"
Acorde  Cambio
C   ->  D
D   ->  E
E   ->  F
F   ->  G
G   ->  A
A   ->  B
B   ->  C#

C#  ->  D#
D#  ->  F
F#  ->  G#
G#  ->  A#
A#  ->  C


Al presionar el boton "-1"
Acorde  Cambio
C   ->  Bb
D   ->  C
E   ->  D
F   ->  Eb
G   ->  F
A   ->  G
B   ->  A
Db  ->  B
Eb  ->  Db
Gb  ->  E 
Ab  ->  Gb
Bb  ->  Ab
-->

<html>

        <head>
        <meta charset="utf-8">
            <link rel="stylesheet" type="text/css" href="style.css" />
            <meta name="viewport" content="width=device-width, initial-scale=0">
            <script src="jquery-3.2.0.min.js" type="text/javascript"></script>  
            <script src="jquery.js" type="text/javascript"></script>  

        </head>
  <!-- Los estilos se proyectarán a nuestra aplicacion -->

  <body>
  <input type="button" value="-1" id = "menos" >
<input type="button" value="+1" id = "mas" >
<input type="button" value="Original" id = "original" >


  <pre>
<b>1 - TE LOAMOS, OH DIOS </b>

<b>    G    </b>
1Te loamos, oh Dios, con unánime voz 
<b>                                      D </b>
Porque en Cristo, tu Hijo, nos diste perdón. 

<b>  CORO </b>

<b> G                                    D </b>
Aleluya Te alabamos, cuán grande es tu amor 
<b>G                     C       G      </b>
Aleluya  Te adoramos, bendito Señor. 
</pre>
</body>
</html>
<!-- Saúl Hernández -->
<!-- YouTube: saul hernandez piano -->

This is what I have, when giving less works perfectly, but then everything is lost.

javascript jquery html regex

asked by Saúl Hernández 27.06.2017 в 18:05

source

3 answers

0

Is there any way to check or prevent a letter from being changed 2 times in a single event?

replace is a JavaScript function that can be used with or without jQuery. You are using it with the flag g which makes the "global emparajamiento" that is, it changes all the coincidences. If you only want to change the first one, remove that flag.

Here's an example.

Sequence A, B, C is included twice, using line breaks in a pre tag as a separator. Clicking the Cambiar button replaces the first A with D by using replace . If you click again, the first A will now be the second sequence and this will be replaced by D .

There is no use of jQuery because it is not necessary. See Should jQuery be used in "all" HTML / CSS / JavaScript application?

function cambiar(){
  var pre = document.querySelector('pre');
  pre.innerHTML = pre.innerHTML.replace(/A/,'D');
}

<input type="button" value="Cambiar" onclick="cambiar();"/>
<pre>
A
B
C
A
B
C
</pre>

answered by 06.07.2017 в 04:24

-1

Well I update according to the previous comments.

you must generate the buttons with the actions in the html template.

After you have this the jquery you must program the two click events (one per button).

then you must read and capture the text in a function that you will use generically, in this function you should use the following:

The easiest thing would be to use a regular expression with flag g to replace all instances:

str.replace(/foo/g, "bar")

to finish you must then rewrite the text in the template.

Unfortunately, if you do not have the complete code or you can not indicate the exact error that you have on the screen, we can not go further.

English author: link

This is how it would be about what you want to do, I have not tried it.

HTML:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=0">
    </head>
    <body>
        <div class="title">1 - TE LOAMOS, OH DIOS</div>
        <div class="acor"><pre><b>      G    </b></pre></div>
        <div class="linea"><pre>1Te loamos, oh Dios, con unánime voz </pre></div>
        <div class="acor"><pre><b>                                         D </b></pre></div>
        <div class="linea"><pre>Porque en Cristo, tu Hijo, nos diste perdón. </pre></div>
        <div class="cor"><pre><b>  CORO </b></pre></div>
        <div class="acor"><pre><b>    G                                    D </b></pre></div>
        <div class="linea"><pre>Aleluya Te alabamos, cuán grande es tu amor </pre></div>
        <div class="acor"><pre><b>    G                     C      G      </b></pre></div>
        <div class="linea"><pre>Aleluya  Te adoramos, bendito Señor. </pre></div>
        <input type="button" id="upto" value="Subir Tono"><input type="button" id="downto" value="Bajar Tono">
    </body>
    <script src="jquery-3.2.min.js" type="text/javascript"></script>  
    <script src="jquery.js" type="text/javascript"></script>  
</html>

Javascript

$(function() {
    $(document).on("click",'#upto', function (event, xhr, settings) {
        //

        $(".acor").each(function () {
            var replacers = {
                'G': 'A',
                'C': 'D',
                'D': 'E'
                };
            var vartxt = $(this).text();
            for (var key in replacers) {
                vartxt = vartxt.replace(replacers[key], key);
            }
            $(this).text(vartxt);
        });
    });
    $(document).on("click",'#downto', function (event, xhr, settings) {
        //
        $(".acor").each(function () {
            var replacers = {
                'G': 'A',
                'C': 'D',
                'D': 'E'
                };
            var vartxt = $(this).text();
            for (var key in replacers) {
                vartxt = vartxt.replace(replacers[key], key);
            }
            $(this).text(vartxt);
        });
    });
});

answered by 27.06.2017 в 18:16

Change Field to XML attribute TARGET - PowerCenter Local Database in Java

score 0 · Accepted Answer

What I did was to enclose each chord in a <b> tag separately with a data-original="" indicating what the original chord is. The script searches in which position of the array is the chord and replaces it by the chord that is in the same position but within the array Cambio .

The script does exactly what you ask, but I do not know if it's musically correct because I do not understand anything about music.
Now, I get the feeling that something is wrong, because when I upload a chord there is the possibility that later I can not download it because the lyrics are different.

If you show me a table that explains how to raise or lower the chord I can correct the script.

I leave an SO link that apparently does what you need, but the sequence of chords is different: link

var acordesUp = ['C', 'D', 'E', 'F', 'G', 'A', 'B', 'C#', 'D#', 'F#', 'G#', 'A#'];
var acordesUpCambio = ['D', 'E', 'F', 'G', 'A', 'B', 'C#', 'D#', 'F', 'G#', 'A#', 'C'];
var acordesDown = ['C', 'D', 'E', 'F', 'G', 'A', 'B', 'Db', 'Eb', 'Gb', 'Ab', 'Bb'];
var acordesDownCambio = ['Bb', 'C', 'D', 'Eb', 'F', 'G', 'A', 'B', 'Db', 'E', 'Gb', 'Ab'];

$('#menos').click(function () {
  $('[data-original]').each(function () {
    var acordeActual = $(this).text();
    var acordeIdx = acordesDown.indexOf(acordeActual);
    $(this).text(acordesDownCambio[acordeIdx]);
  });
});

$('#mas').click(function () {
  $('[data-original]').each(function () {
    var acordeActual = $(this).text();
    var acordeIdx = acordesUp.indexOf(acordeActual);
    $(this).text(acordesUpCambio[acordeIdx]);
  });
});

$('#original').click(function () {
  $('[data-original]').each(function () {
    $(this).text($(this).data('original'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-1" id="menos">
<input type="button" value="+1" id="mas">
<input type="button" value="Original" id="original">

<pre>
<b>1 - TE LOAMOS, OH DIOS </b>

    <b data-original="G">G</b>
1Te loamos, oh Dios, con unánime voz 
                                       <b data-original="D">D</b>
Porque en Cristo, tu Hijo, nos diste perdón. 

<b>  CORO </b>

 <b data-original="G">G</b>                                    <b data-original="D">D</b>
Aleluya Te alabamos, cuán grande es tu amor 
<b data-original="G">G</b>                     <b data-original="C">C</b>       <b data-original="G">G</b>
Aleluya  Te adoramos, bendito Señor. 
</pre>