用户键入输入时的单词替换（JS）答案

【问题标题】：Word replacement while user is typing input (JS)用户键入输入时的单词替换（JS）
【发布时间】：2015-10-28 07:41:23
【问题描述】：

我有一个代码，它显示用户正在输入的内容，并且该输入被写回到 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 文档上，但还会自动将该特定字符串从“这是一个字符串”更改为“这是一个文本” “.. 请帮忙！

【问题讨论】：

我现在不能给你一个准确的代码响应，但是一个（有些不雅的）解决方案是将输入框变成一个在按键时更新的字符串。然后，使用 for 循环遍历单词的关联数组及其替换。使用 .indexOf 方法在输入字符串中查找单词，然后拆分输入并从数组中连接所需的替换。

标签： javascript jquery css arrays html

【解决方案1】：

您可以简单地对变量使用替换功能。

<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>

【讨论】：

【解决方案2】：

请看我的小提琴here。

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

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);
});

【讨论】：

有什么方法可以在 textarea 中打印 replaceValues 而不是 HTML 文档本身？
试试这个 fork：jsfiddle.net/kiirosora/e9kL6m8s/1 我将 .printchatbox 更改为 textarea 而不是 div。我也更改了 JS（.text 到 .val）
我试过了，但由于某种原因，当我这样做时它不起作用。但再次感谢您的帮助
在 Javascript 中，有没有办法打破文本，使它们不会出现在彼此旁边，而是出现在单独的行上？ - 我是 JS 的菜鸟。对不起。
您想在哪里放置休息点？你能举个例子吗？

【解决方案3】：

<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>

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

【讨论】：