gpt4 book ai didi

javascript - 如何使用 jQuery 更新文本区域内的代码

转载 作者:行者123 更新时间:2023-11-28 07:00:18 25 4
gpt4 key购买 nike

我有一个文本区域,其中包含用户输入的代码,我想获取该代码并使用 jQuery 扫描它,以获取名为设置的自定义标记内的值,然后将此值添加到输入中,以便用户能够无需触摸代码即可更改设置标签内的值。我能够获取值并将它们添加到输入中,但无法使用新值更新代码。

HTML 代码:

<div id='tab-1'>
<textarea id='template-code' cols='67' rows='27'></textarea>
<button id='submit-code'>Submit Code</button>
</div>

<div id='tab-2' class='unactive'>
<form id='settings-form' method='POST'>
<div id='result'></div>
<button id='update-code'>Update Code</button>
</form>
</div>

CSS 代码:

.unactive {
display: none
}

jQuery 代码:

$('#template-code').change(function (){

var $that = $(this),
template_code = $that.val(),
code = '',
new_data = '';

// Extract settings from the theme and add them to #result
$(document).on('click', '#submit-code', function (){

$('#tab-1').addClass('unactive');
$('#tab-2').removeClass('unactive');

$(template_code).find('setting').each(function (i){

var $this = $(this),
setting_std = $this.text(),
setting_id = $this.attr('id');

code += '<input id="'+setting_id+'" name="'+setting_id+'" type="text" value="'+setting_std+'"><br>';

});

if(code !== ''){
$('#result').html(code);
}

});

// Update old data with the new one
$(document).on('click', '#update-code', function (){

new_data = $( "#settings-form" ).serializeArray();
$.each( new_data, function( i, new_field ) {

template_code += $(template_code).find('setting#'+ new_field.name).text(new_field.value);
console.log(new_field.value);

});

$('#template-code').val(template_code);
$('#tab-1').removeClass('unactive');

return false;

});

});

这是将添加到文本区域内的主题代码示例:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

<b:include data='blog' name='all-head-content'/>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

<title><data:blog.pageTitle/></title>

<div id='option-panel' style='display:none!important'>

<setting id='post_thumbnail'>http://lorempixel.com/640/300/</setting>
<setting id='search_icon'>on</setting>

</div>
</head>
<body>

</body>
</html>

这是一个有效的 JsFiddle,可以让您的事情变得更轻松:

http://jsfiddle.net/mabwhf6a/3/

这是一个小视频,解释了我想要的内容:

http://screencast.com/t/XqggRlQI6

最佳答案

好吧,这是基于的想法,嗯...使用动态正则表达式构建进行简单搜索/替换(该部分可以/应该改进,也许使用更好的正则表达式你可以有更好的解决方案。我不擅长正则表达式,但也,HTML 不应该用正则表达式来解析:))。您的代码的第一部分原样...我更改了第二个函数。

$(document).on('click', '#update-code', function (){

//template_code=$('#template-code').val();

for(i=0;i<$('input:text').length;i++) {

dynamic_regex="(<setting id='"+$('input:text').eq(i).attr('id')+"'>)(.*?)(</setting>)";

var regex = new RegExp(dynamic_regex, 'gm');

var subst = '$1'+ $('input:text').eq(i).val() +'$3';
$('#template-code').val($('#template-code').val().replace(regex, subst));

}

});

因此,文本输入的数量是动态的(在 3 个设置标签上进行测试!),并且基于该数量(长度)和输入 id - 我们构建正则表达式并用输入值替换标签文本(逐行)。 .当然,textarea val 必须正确更新。

演示:<强> http://jsfiddle.net/5zcxbaqf/

关于javascript - 如何使用 jQuery 更新文本区域内的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32204495/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com