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

Question

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

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

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

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

这有什么意义吗？

JS

$(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);

    });

});

Answer 1

{{keyword}}单独存储模板（来自 post_title 的值），这样您在更改它的值时就不会丢失位置。

$(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);

    });

});