在输入翻译器时实时替换文本框值

Question

首先，我想告诉你，我是JQuery的初学者。如果我在文本框上键入"A“，即想要替换为"B”，我正在尝试在文本框上构建一个实时替换的翻译程序。

这是要检查多达3个字。也就是说，

1. 如果我在文本框上键入"A“，即要替换为"X”
2. 如果我在文本框上键入"AB“，则要将其替换为"Y”
3. 如果我在文本框中键入"ABZ“，则要替换为"Z”

另一件事，在替换后，如果我键入中间的一些词，也要替换。例如，如果我在XY之间键入ABZ，即要替换XZY。

HTML代码：

<textarea type="text" name="fname" class="chatinput" style="margin: 0px; width:   977px; height: 324px;"> </textarea>

请帮助使用JQuery构建这个程序。我试着靠This来做这件事，但它不起作用。

Answer 1

试试这把小提琴：https://jsfiddle.net/L9fe0py3/2/

$(document).ready(function() {
var dict = [{word:"A",replacement:"B"},{word:"AB",replacement:"C"},{word:"ABZ",replacement:"D"}];
  $('#txt').blur(function(){
        for(var i=0;i<dict.length;i++){
    /*
    If I typed "A" on text box that is want replace to "B"
If I typed "AB" on text box that is want to replace to "C"
If I typed "ABZ" on text box that is want to replace to "D"
    */
        $('#txt').val($('#txt').val().replace(dict[i].word, dict[i].replacement));
    }
  });
});

您需要将JSON替换为需要替换的字符，当文本框变模糊时，您将得到所需的内容。

Answer 2

您可以尝试为关键字及其翻译创建一个对象数组，并对其进行迭代，将文本框中找到的单词替换为它们的翻译(如果有)。

但是我认为我们应该先寻找更长的单词，这样"CABZB"就不会在检查"ABZ“之前先翻译为"CBBZB"了。

请参阅下面的片段：

​

var
  dictionary = [ // Crate array of objects for translation definitions
    {
      word: "A",
      translation: "B"
    }, {
      word: "AB",
      translation: "C"
    }, {
      word: "ABZ",
      translation: "D"
    }
  ],
  $fname = $('#fname'),
  $button = $('#translate');

// Sort dictionary so that longer words are checked first in looping later
dictionary.sort(function(a, b) {
  return b.word.length - a.word.length;
});

$button.click(function() {
  var text = $fname.val();

  // Loop through each item in dictionary and replace where found (prioritizing longer words)
  $.each(dictionary, function(k, v) {
    var regex = new RegExp(v.word, "gim"); // convert keyword to regex (currently case-insensitive)
    text = text.replace(regex, v.translation);
  });

  $fname.val(text);
});

.chatinput {
  width: 500px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="fname" type="text" name="fname" class="chatinput"></textarea>
<br>
<button id="translate">Translate</button>

​

老实说，在我看来，我们不应该翻阅整本字典，因为它可能会变得非常慢(如果它包含大量的翻译，它可能会变得非常大)，但是为了满足你的需要，要在单词中搜索和翻译单词(比如"CABZB“到"CDB")，就必须这样做(我不确定是否有更好的方法，但这就是我现在想出来的)。

如果你真的不需要在单词中进行翻译，那么我认为最好把文本框中的每个单词循环一遍，而不是整个字典。

我希望这能帮到你。