Question

我正在尝试做类似的事情，因为YouTube在您嵌入视频时想要获取代码。您可以单击复选框或选择大小，它会动态更改输入字段的值。

有人知道怎么做吗？

我设法编写了一个正确替换宽度的代码，但我不知道如何在链接末尾添加&scheme=XXX代码，或者如果用户没有选择颜色方案则删除它。 / p>

这是宽度的代码，我不认为它是最好的，但有效：

$("#width").on("change keyup", function(){
    var width = $(this).val();
    if (width){
        $("#embed-text").val($("#embed-text").val().replace(/ (width\s*=\s*["'])[0-9]+(["'])/ig, ' width=\''+width+'\''));
    }
});

这是textarea，我正在尝试更改并输入我正在使用它：

ID取自PHP，实际textarea中jQuery看到".$id."是实际数字

<textarea class='clean' id='embed-text'><iframe src='http://my.url/embed/?r=".$id."' width='600' height='".$height."' frameborder='0' marginwidth='0' marginheight='0' allowtransparency='true'></iframe></textarea>

<div style='padding-right: 10px; display: inline-block;'>
    Color scheme: 
    <select id='schemes' class='clean'>
        <option value='-'>None</option>
        <option value='xxx'>Xxx</option>
    </select>
</div>
<div style='padding-right: 10px; display: inline-block;'>
    Width: <input type='number' min='250' max='725' value='600' id='width' class='clean'>
</div>

当用户没有选择任何方案（或从XXX更改为无）时，我希望textarea（iframes src）中的链接如下：

http://my.url/embed/?r=X

但是当他选择任何方案时，我希望它看起来像这样：

http://my.url/embed/?r=X&scheme=XXX

我其实不知道该怎么做。尝试谷歌搜索超过一小时，但我不知道ID将是什么（识别位置添加字符串的位置），这是PHP值，我不能将它传递给外部脚本文件，所以我试图找到我可以用JS在特定位置插入一些东西（即：从开头起第15个字符），但找不到任何东西。

感谢。

Answer 1

我将一些函数分开，以便保持代码清洁，我认为这就是你要找的JsFiddle

var generateUrl = function(id,colorScheme) {
    var baseUrl = "http://my.url/embed/?";
    var url = baseUrl.concat("r="+id);

    if (colorScheme != null && colorScheme != '')
        url = url.concat("&scheme="+colorScheme);

    return url;
};

var changeUrl = function(id, colorScheme) {
    var url = generateUrl(id, colorScheme);
    var srcPattern = "src='(.*?)'";
    var embedText = $("#embed-text").val();
    var newEmbedText = embedText.replace(new RegExp(srcPattern),"src='"+url+"'");
    $("#embed-text").val(newEmbedText);

};


var changeWidth = function(newWidth) {
    var widthPattern = "width='([0-9]*)'";
    var embedText = $("#embed-text").val();
    var newEmbedText = embedText.replace(new RegExp(widthPattern),"width='"+newWidth+"'");
    $("#embed-text").val(newEmbedText);
};

var getURLParameter = function(url,parameterName) {
  return decodeURIComponent((new RegExp('[?|&]' + parameterName + '=' + '([^&;]+?)(&|#|;|$)').exec(url)||[,""])[1].replace(/\+/g, '%20'))||null
};

var getId = function() {
    var urlPattern = "src='(.*?)'";
    var embedText = $("#embed-text").val();
    var url = embedText.match(new RegExp(urlPattern))[1];
    var id = getURLParameter(url, 'r');
    return id;
};

$("#width").on("change keyup", function(){
    var width = $(this).val();
    var colorScheme = $(schemes).val();

    changeWidth(width);
    changeUrl(getId(),colorScheme);
});

我删除了第一个选项的值' - '，只需将其留空即可。

jQuery在输入字段/ textarea中的特定位置插入/删除文本

1 个答案: