jQuery：通过替换随机选择的关键字来实时更新输入答案

【问题标题】：jQuery: Live update of input with replace of random selected keywordjQuery：通过替换随机选择的关键字来实时更新输入
【发布时间】：2013-09-03 07:17:38
【问题描述】：

我正在寻找使用关键字文本输入创建（随机，由keyup 更新）行为：

每次我更新一个关键字输入（单词，用“，”分隔），我都会更新一个post_title文本输入，但是这个post_title已经有内容并且只能通过替换{{keyword}}来接受更新的关键字（并保持其余文本完整）。

演示：http://jsfiddle.net/7yLqb/1/

slug 目前根据需要更新（随机更新，每次更新关键字时），因为不需要替换 {{keyword}}，但 post_title 需要维护其内容，同时更新 {{keyword}} 每次我修改关键字输入。

这有意义吗？

$(function () {

    $('#keywords').bind('keyup', function () {

        var items = $(this).val().split(', ');
        var keywords_value = items[Math.floor(Math.random() * items.length)];

        var post_title_value = $('#post_title').val();
        var post_title_value_replaced = post_title_value.replace('{{keyword}}', keywords_value);
        $('#post_title').val(post_title_value_replaced);

        var slug = keywords_value.replace(/[^a-zA-Z0-9-]/g, '-').toLowerCase().replace(/--+/g, '-');
        $('#slug').val(slug);

    });

});

【问题讨论】：

给出一个示例输入，以及您期望看到的结果

标签： jquery random replace

【解决方案1】：

单独存储模板（来自 post_title 的值），以便在更改其值时不会丢失 {{keyword}} 的位置。

$(function () {
    var titleTemplate = $("#post_title").val();
    $('#keywords').bind('keyup', function () {

        var items = $(this).val().split(', ');
        var keywords_value = items[Math.floor(Math.random() * items.length)];

        //var post_title_value = $('#post_title').val();
        var post_title_value_replaced = titleTemplate.replace('{{keyword}}', keywords_value);
        $('#post_title').val(post_title_value_replaced);

        var slug = keywords_value.replace(/[^a-zA-Z0-9-]/g, '-').toLowerCase().replace(/--+/g, '-');
        $('#slug').val(slug);

    });

});

【讨论】：