替换 1 个文本字段的功能词，但不适用于多个字段

Question

我有一个替换函数，它将字符串或单个单词与定义的输入值匹配，并针对它输出一个指定的单词。

我设计函数的方式只允许它与页面上的单个输入和单个输出文本区域一起工作，我不能应用多个函数，因此来自 1 个输入字段的输入由不同的函数处理并显示在不同的输出文本区域字段。

代码如下：

HTML：

<input id="input_1" class="text-area-main input_mainn" type="text" placeholder="Input Goes Here" oninput="funcinput1()"> //input

<textarea id="output_1" class="text-area-main"></textarea> //output 1
<textarea id="output_2" class="text-area-main"></textarea> //output

JS：

function funcinput1() {
    let translator = {
        "a quick brown fox jumps over a lazy dog": "a fast brown fox jumps ovew a wazy good boy",
        "Hello there":"Ello There",
        "n":"\ud83d\udc68\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c\udffd"
    };
    
    var input = document.querySelector("#input_1");
    var output = document.querySelector("#output_1");

    input.addEventListener("input", () => {
        let text = input.value;
        let translated = translator[text];
        if (!translated) {
            let words = input.value.split(" ");
            translated = words.map(word => translator[word] || word).join(" ");
        }
        output.value = translated;
    });
  };

我知道我在输入字段上应用函数而不是在输出文本区域上做错了，但是我不知道如何使整个场景工作。

简而言之，输入将来自单个输入字段，但可以有多个输出文本区域，每个区域都会根据附加的功能进行处理。

例子：

输入是：“你好”

输出 1 可以是：“Ello There”

输出 2 可以是：“你好”

每个输入最多可以包含 10 或 20 个字段和 20 个不同的功能，但在同一页面上。

我仍在学习，不知道如何以最好的方式做到这一点。

Answer 1

您可以为每个输出文本区域提供翻译词典。

在输入时，您可以重用该函数，根据输出区域的id 键和字典中的键进行翻译。

考虑下面的例子，它可以很容易地扩展到n 输出区域的数量-

const translator = {
  "output_1": {
    "a quick brown fox jumps over a lazy dog": "a fast brown fox jumps ovew a wazy good boy",
    "Hello there": "Ello There",
    "n": "\ud83d\udc68\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c\udffd"
  },
  "output_2": {
    "a quick brown fox jumps over a lazy dog": "new fox",
    "Hello there": "Hey There",
    "n": "no"
  }
};

document.querySelector("#input_1").addEventListener("input", (e) => {
  for (const output of Object.keys(translator)) {
    document.querySelector(`#${output}`).value = translate(e.target, output);
  }
});

function translate(input, outputSelector) {
  const text = input.value;
  let translated = translator[outputSelector][text];
  if (!translated) {
    const words = input.value.split(" ");
    translated = words.map(word => translator[word] || word).join(" ");
  }
  return translated;
}

<input id="input_1" class="text-area-main input_mainn" type="text" placeholder="Input Goes Here">

<textarea id="output_1" class="text-area-main"></textarea>
<textarea id="output_2" class="text-area-main"></textarea>

如果您希望对每个输出区域执行不同的操作而不是使用字典，请添加if 条件或更好地基于键调用函数（创建要应用的自定义函数的字典）。

---

编辑 1：

使用来自here的解决方案-

const translator = {
  "output_1": {
    "a quick brown fox jumps over a lazy dog": "a fast brown fox jumps ovew a wazy good boy",
    "Hello there": "Ello There",
    "n": "\ud83d\udc68\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c\udffd"
  },
  "output_2": {
    "a quick brown fox jumps over a lazy dog": "new fox",
    "Hello there": "Hey There",
    "n": "no"
  }
};

document.querySelector("#input_1").addEventListener("input", (e) => {
  for (const output of Object.keys(translator)) {
    document.querySelector(`#${output}`).value = translate(e.target, output);
  }
});

function translate(input, outputSelector) {
  const text = input.value;
  const currentTranslator = translator[outputSelector];
  const translated = replaceOnceUsingDictionary(currentTranslator, text, function(key, dictionary) {
    return dictionary[key];
  });
  return translated;
}

/*
 * @description Replaces phrases in a string, based on keys in a given dictionary.
 *               Each key is used only once, and the replacements are case-insensitive
 * @param       Object dictionary  {key: phrase, ...}
 * @param       String content
 * @param       Function replacehandler
 * @returns     Modified string
 */
function replaceOnceUsingDictionary(dictionary, content, replacehandler) {
  if (typeof replacehandler != "function") {
    // Default replacehandler function.
    replacehandler = function(key, dictionary) {
      return dictionary[key];
    }
  }

  var patterns = [], // \b is used to mark boundaries "foo" doesn't match food
    patternHash = {},
    oldkey, key, index = 0,
    output = [];
  for (key in dictionary) {
    // Case-insensitivity:
    key = (oldkey = key).toLowerCase();
    dictionary[key] = dictionary[oldkey];

    // Sanitize the key, and push it in the list
    patterns.push('\\b(?:' + key.replace(/([[^$.|?*+(){}])/g, '\\$1') + ')\\b');

    // Add entry to hash variable, for an optimized backtracking at the next loop
    patternHash[key] = index++;
  }
  var pattern = new RegExp(patterns.join('|'), 'gi'),
    lastIndex = 0;

  // We should actually test using !== null, but for foolproofness,
  //  we also reject empty strings
  while (key = pattern.exec(content)) {
    // Case-insensitivity
    key = key[0].toLowerCase();

    // Add to output buffer
    output.push(content.substring(lastIndex, pattern.lastIndex - key.length));
    // The next line is the actual replacement method
    output.push(replacehandler(key, dictionary));

    // Update lastIndex variable
    lastIndex = pattern.lastIndex;

    // Don't match again by removing the matched word, create new pattern
    patterns[patternHash[key]] = '^';
    pattern = new RegExp(patterns.join('|'), 'gi');

    // IMPORTANT: Update lastIndex property. Otherwise, enjoy an infinite loop
    pattern.lastIndex = lastIndex;
  }
  output.push(content.substring(lastIndex, content.length));
  return output.join('');
}

<input id="input_1" class="text-area-main input_mainn" type="text" placeholder="Input Goes Here">

<textarea id="output_1" class="text-area-main"></textarea> 
<textarea id="output_2" class="text-area-main"></textarea>