5

Em vez de fazer:

var html = '<a href="' + data.href + '" title="' + data.title + '">' + data.desc + '</a>';

Estou fazendo:

var html = '<a href="{href}" title="{title}">{desc}</a>';

html = html
     .replace( '{href}',  data.href )
     .replace( '{title}', data.title )
     .replace( '{desc}',  data.desc );

Ou replace( /{nome}/g, data.nome ) se houverem várias ocorrências.

Existe alguma maneira "oficial" ou cada um tem que resolver por sua conta criando uma função personalizada?

Encontrei um par de plugins antigos para jQuery, 2007 e 2008. Mudou alguma coisa de lá para cá? Os frameworks JavaScript, como jQuery ou Mootools, já incorporam isso? Se sim, qual o JS por trás disso?

4
  • Existe o convenientemente batizado sprintf.js, apesar de não ser nativo Commented 15/10/2014 às 17:16
  • Eu costumo usar o construtor de elementos do MooTools para casos semelhantes ao que colocou jsfiddle.net/j1tknqj7, mas acho que uma versão JS do sprintf não existe. Vou colocar uma sugestão quando a minha criançada estiver na cama e se ainda não houver uma boa sugestão.
    – Sergio
    Commented 15/10/2014 às 17:31
  • Existem sistemas de template que resolvem isso. Com handlebars ou mustache, você teria '<a href="{{href}}" title="{{title}}">{{desc}}</a>' compilado como template, e depois só passa o objeto data para o template que ele resolve.
    – bfavaretto
    Commented 15/10/2014 às 17:32
  • @bfavaretto, esqueci de comentar que minha inspiração veio do bigode. Minha intenção é algo mais básico para manipulação de strings html dentro de código js.
    – brasofilo
    Commented 15/10/2014 às 18:45

4 Respostas 4

2

Com jQuery você pode usar seu construtor de elementos:

var $elemento = $("<a>", {href: data.href, title: data.title}).text(data.desc);
$('.umContainerParaNossoElemento').html($elemento);
console.log("Versão string: " + $elemento[0].outterHTML);

Assim, você pode construir elementos jQuery, que contém um HTMLElement. Com isso você pode manipular o elemento como registrar eventos, inserir outros elementos, etc, mesmo antes do objeto estar no documento.

Como perguntado, o primeiro elemento você passa a string da tag(s) que você quer criar como < div> ou < ul>< li>.
O segundo argumento é um objeto com os valores dos atributos da tag, em camel case (o HTML é case insensitive!), como {href: 'valor', class: 'umaClasse', type: 'button'}.

Criando elementos com jQuery - jQuery API

1
  • Que outros parâmetros posso usar no construtor? Seria legal linkar pra documentação...
    – brasofilo
    Commented 15/10/2014 às 18:39
2

Pra sua e nossa sorte tem uma galera antenada em transformar functions do PHP em JS e você encontrará um monte no site http://phpjs.org.

A equivalente a sprintf é esta http://phpjs.org/functions/sprintf/

Boa sorte!

2

No ECMAScript 6 (ES6), a última versão da especificação do JavaScript, existem as template strings, que permitem algo parecido:

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);

E a boa notícia: isso já funciona no Chrome, Firefox, Opera e no Edge.

1

A minha solução para isso seria adicionando um método ao prototype de String:

 String.prototype.format = function()
 {
    var args = arguments;

    return this.replace(/\{(\d+)\}/g, function(text, key)
    {
        return args[key];
    });
 }

Daí poderíamos fazer a seguinte chamada:

"Meu nome é '{0}' e estou no site <strong>{1}</strong>".format('Wallace', 'StackOverlow')

A saída seria:

"Meu nome é 'Wallace' e estou no site <strong>StackOverlow</strong>

Eu tirei a ideia para escrever essa função da linguagem chamada Python.

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 .