4

Eu tentei utilizar resultado.replace("arroba", "@") do javascript para mudar a palavra "arroba" para "@" como está no código abaixo, mas não funcionou. Quero fazer isso com ponto, virgula, underline e etc... pois, o speech recognition escreve por extenso os caracteres especiais. Alguém tem alguma ideia de como posso fazer isso?

HTML

<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <button id="btn-gravar-audio">Gravar</button><br/><br/>
        <script type="text/javascript" src="js/teste.js"></script>
        <textarea id="textarea" cols="60" rows="5"></textarea>
    </body>
</html>

JAVASCRIPT

window.addEventListener('DOMContentLoaded', function () {
var btn_gravacao = document.querySelector('#btn-gravar-audio');

var transcricao_audio = '';
var esta_gravando = false;

if (window.SpeechRecognition || window.webkitSpeechRecognition) {

    var speech_api = window.SpeechRecognition || window.webkitSpeechRecognition;
    var receber_audio = new speech_api();

    receber_audio.continuous = true;
    receber_audio.interimResults = true;
    receber_audio.lang = "pt-BR";

    receber_audio.onstart = function () {
        esta_gravando = true;
        btn_gravacao.innerHTML = 'Gravando! Parar gravação';
    };

    receber_audio.onend = function () {
        esta_gravando = false;
        btn_gravacao.innerHTML = 'Iniciar Gravação';
    };
    receber_audio.onresult = function (event) {
                var interim_transcript = '';

               for(var i = event.resultIndex; i < event.results.length; i++){
                   if(event.results[i].isFinal){
                       transcricao_audio += event.results[i][0].transcript; 
                   }else{
                       interim_transcript += event.results[i][0].transcript; 
                   }

                   var resultado = transcricao_audio || interim_transcript;

                   console.log(resultado);
               }



               document.getElementById("textarea").innerHTML = resultado;

    resultado.replace("arroba", "@");

    };

    btn_gravacao.addEventListener('click', function (e) {
        if (esta_gravando) {
            receber_audio.stop();
            return;
        }
        receber_audio.start();
    }, false);

} else {
    console.log("navegador não apresenta suporte a web speech api");
}
}, false);
3
  • Fecha receber_audio.onresult = function (event) { com }. Commented 5/01/2018 às 14:15
  • Utiliza RegExp com a flag g para substituir todas as ocorrências em vez de só a primeira. Exemplo: "um dois um".replace(/um/g, "1").replace(/dois/g, "2");. Commented 5/01/2018 às 14:53
  • Valeu pela ajuda!
    – Luiz
    Commented 5/01/2018 às 16:36

1 Resposta 1

5

Tem 2 erros, primeiro é ordem:

document.getElementById("textarea").innerHTML = resultado;

resultado.replace("arroba", "@");

Você esta fazendo o replace depois, tem que ser antes, outra coisa você precisa setar o valor novamente na variável, assim:

resultado = resultado.replace("arroba", "@");

document.getElementById("textarea").innerHTML = resultado;

Só que se usar com string assim replace("arroba", "@") ele só vai procurar o primeiro arroba, o ideial é usar com o modificador g que irá buscar rodas palavras arroba e também com o modificador i (acaso ocorra de haver letras em maiúsculo), também poderia usar o metacaractere \b para evitar que uma palavra como arrobas (que provavelmente se refere a uma descrição do uso da @ ou do peso de algo) iria ser convertido em:

@s

Note que ficaria um arroba e um s após, então faça assim que ele irá procurar pela palavra separada por espaço ou acaso esteja no final ou começo da string:

resultado = resultado.replace(/\barroba\b/gi, "@");

document.getElementById("textarea").innerHTML = resultado;

Para palavras com acento pode fazer assim:

resultado = resultado.replace(/\bv[íi]rgula\b/gi, ",");

document.getElementById("textarea").innerHTML = resultado;

Organizando o as palavras com iteração

Para uma melhor organização das palavras você pode usar um objeto simples e depois iterar com for, algo como:

var dicionario = {
    "@": /\barroba\b/gi,
    ";": /\bponto e v[íi]rgula\b/gi,
    ",": /\bv[íi]rgula\b/gi,
    "!": /\bexclamação\b/gi,
    "?": /\binterrogação\b/gi,
};

E depois faça isto:

for (var substituto in dicionario) {
    resultado = resultado.replace(dicionario[substituto], substituto);
}

document.getElementById("textarea").innerHTML = resultado;

Nota muito importante: para que os acentos funcionem devidamente o documento .html deve ser salvo com a mesma codificação que usa na página e deve usar o <meta charset="<seu charset>"> ou então enviar o charset via HEADER.

Exemplo online no codepen (só funciona no Chrome e Safari): https://codepen.io/brcontainer/pen/YYrbNX

Deve ficar assim (usei UTF-8 porque é o charset que uso em meus sites, mas pode mudar para iso-8859-1 acaso use latin1/ansi/etc):

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<textarea id="textarea"></textarea>
<button id="btn-gravar-audio">Gravar</button>

<script>
var btn_gravacao = document.querySelector('#btn-gravar-audio');

var transcricao_audio = '';
var esta_gravando = false;

var dicionario = {
    "@": /\barroba\b/gi,
    ";": /\bponto e v[íi]rgula\b/gi,
    ",": /\bv[íi]rgula\b/gi,
    "!": /\bexclamação\b/gi,
    "?": /\binterrogação\b/gi,
};

if (window.SpeechRecognition || window.webkitSpeechRecognition) {

    var speech_api = window.SpeechRecognition || window.webkitSpeechRecognition;
    var receber_audio = new speech_api();

    receber_audio.continuous = true;
    receber_audio.interimResults = true;
    receber_audio.lang = "pt-BR";

    receber_audio.onstart = function () {
        esta_gravando = true;
        btn_gravacao.innerHTML = 'Gravando! Parar gravação';
    };

    receber_audio.onend = function () {
        esta_gravando = false;
        btn_gravacao.innerHTML = 'Iniciar Gravação';
    };

    receber_audio.onresult = function (event) {
        var interim_transcript = '';

        for(var i = event.resultIndex; i < event.results.length; i++){
            if(event.results[i].isFinal){
                transcricao_audio += event.results[i][0].transcript;
            }else{
                interim_transcript += event.results[i][0].transcript;
            }

           var resultado = transcricao_audio || interim_transcript;
        }

        for (var substituto in dicionario) {
            resultado = resultado.replace(dicionario[substituto], substituto);
        }

        document.getElementById("textarea").innerHTML = resultado;

    };

    btn_gravacao.addEventListener('click', function (e) {
        if (esta_gravando) {
            receber_audio.stop();
            return;
        }

        receber_audio.start();
    }, false);

} else {
    console.log("navegador não apresenta suporte a web speech api");
}
</script>

</body>
</html>
1
  • 1
    Valeu pela ajuda! Funcionou perfeitamente aqui. Eu tinha feito assim: document.getElementById("textarea").innerHTML = resultado.replace(/arroba/g, "@"); e tinha funcionado, mas do jeito que você fez está bem melhor e mais organizado.
    – Luiz
    Commented 5/01/2018 às 16:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .