Question

我有一个代码，显示用户正在键入的内容，并将该输入写回html文档中的a。

这是下面的代码：

<html><head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="jquery.zclip.js"></script>
<style> body{font-family:century gothic;}</style>
</head>
<body style="zoom: 1;">

<div style="padding:10%;">



<textarea type="text" name="fname" class="chatinput" style="margin: 0px; width:   977px; height: 324px;"> </textarea>
<div style="padding-top:10%;" class="printchatbox"></div>




<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<script src="jquery.zclip.js"></script>



<script type="text/javascript">
$('.chatinput').keyup(function(event) {
newText = event.target.value;
$('.printchatbox').text(newText);
});  
</script>

有人可以帮我弄清楚我是如何做到这一点的，以便在用户输入时将一个字或一行字符串替换为其他内容。

例如，用户写入“这是一个字符串”...程序将其写在html文档上，但也会自动将该特定字符串更改为“This is a text”from“This is a string” ” .. 请帮忙！

Answer 1

请看我的小提琴here。

我创建了一个对象，您可以在其中添加键值对中需要替换的所有字符串。请记住要转义RegExp的特殊字符（使用\）。

<强> JS

var replaceValues = {
    'string' : 'text',
    'foo' : 'bar'
}

$('.chatinput').keyup(function (event) {
    newText = event.target.value;
    for (var txt in replaceValues) {
        var temp = new RegExp(txt, 'gim');
        newText = newText.replace(temp, replaceValues[txt]);
    }
    $('.printchatbox').text(newText);
});

Answer 2

您可以在变量上使用替换函数。

<html><head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="jquery.zclip.js"></script>
<style> body{font-family:century gothic;}</style>
</head>
<body style="zoom: 1;">

<div style="padding:10%;">



<textarea type="text" name="fname" class="chatinput" style="margin: 0px; width:   977px; height: 324px;"> </textarea>
<div style="padding-top:10%;" class="printchatbox"></div>




<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<script src="jquery.zclip.js"></script>



<script type="text/javascript">
$('.chatinput').keyup(function(event) {
newText = event.target.value;
$('.printchatbox').text(newText.replace("This is a string","This is a text"));
});  
</script>

Answer 3

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<textarea type="text" name="fname" class="chatinput" style="margin: 0px; width:   977px; height: 324px;"> </textarea>
<div style="padding-top:10%;" class="printchatbox"></div>

＆＃13;

<script type="text/javascript">
$('.chatinput').keyup(function() {
var newText = $('.chatinput').val();
$('.printchatbox').text(newText);
});  
</script>

用户输入输入（JS）时更换单词

3 个答案: