javascript - 我用于映射的 javascript 代码按字符拆分单词，并且不会读取输入中的整个单词

Question

我正在创建一种翻译器，用户在其中输入特定的字母数字字符或单词，翻译器会针对它显示预定义的输出。

例子：

如果有人输入大写A，它输出Apple

这适用于单个字符输入，但如果我将整个单词映射为另一个单词，我的代码将无法正常工作。

这是我的代码：

输入字段：

output.innerHTML=finalText.trim()}var outHtml='<div class="text-detail"><div class="row element-inner single-element"><div class="col-md-11 col-10 position-initial heading-main"><div class="font-style-name"><span>Cirlce Outline Text</span></div></div><div class="col-md-1 col-2 button-main"><button class="ml-auto copy-btn btn_cpy col-md-1 col-12 button_copy integration-checklist__copy-button" data-clipboard-text="'+applyCharMap(Ahmad,text)+'" data-clipboard-action="copy"><i class="fas fa-copy"></i>COPY</button></div><div class="col-md-12 col-12 position-initial text-area-outer"><div class="font-pre col-md-12 col-12 signature text-area-inner"><textarea class="text-area-main">'+applyCharMap(Ahmad,text)+'</textarea></div></div></div></div>';output.innerHTML=outHtml}

分割字符的代码：

function applyCharMap(map, text) {
    var out = "";
    var _iteratorNormalCompletion = !0;
    var _didIteratorError = !1;
    var _iteratorError = undefined;
    try {
        for (var _iterator = text.split("")[Symbol.iterator](), _step; 
          !(_iteratorNormalCompletion = (_step = _iterator.next()).done); 
          _iteratorNormalCompletion = !0) {
            var c = _step.value;
            if (map[c] !== undefined) out += map[c];
            else if (map[c.toLowerCase()] !== undefined) out += map[c.toLowerCase()];
            else out += c
        }
    } catch (err) {
        _didIteratorError = !0;
        _iteratorError = err
    } finally {
        try {
            if (!_iteratorNormalCompletion && _iterator.return != null) {
                _iterator.return()
            }
        } finally {
            if (_didIteratorError) {
                throw _iteratorError
            }
        }
    }
    return out
}

我想要实现的（首先是输入，在“：”之后是输出

var Ahmad = {
  "you": "yaseelf",
  "I": "meseelf",
  "to": "yagatue",
  "the": "dee",
  "a": "nako",
  "and": "alakahso",
  "that": "dat",
  "it": "dating",
  "of": "anaufo",
  "me": "da-mee",
  "what": "waah",
  "is": "ugataku",
  "in": "uginoko",
  "this": "dees",
  "know": "ka-noe",
  "I'm": "meselpa",
  "for": "gafor",
  "no": "refuso",
  "have": "hanave",
  "my": "itake",
  "don't": "refusio",
  "just": "Kunusti",
  "not": "refinaki",
  "not": "refinaki",
  "do": "gajadoo",
  "be": "ukoh",
  "on": "skino",
  "your": "giorza",
  "was": "dasava",
  "we": "garnatoupe",
  "it's": "itajon",
  "with": "witaki",
  "so": "yasio",
  "but": "bahut",
  "all": "alli",
  "well": "vaheil",
  "are": "majare",
  "he": "erono",
  "oh": "eeono",
  "about": "hajabon",
  "right": "gaso",
  "you're": "nuer",
  "get": "kles"
};

所以会发生的是当有人输入“you”时，它应该输出“yaseelf”

但是，目前它只显示每个字符的输出而不是整个替换。

希望高手能帮助解决这个问题。

PS 类似的代码示例可以在这里找到

问候，

艾哈迈德

标签： javascript

Answer 1

嗯，有内置的功能来分割字符和单词。你在重新发明轮子。您的示例似乎并不完整，或者至少很难使用，因此我制作了一个简化版本，应该可以帮助您。它使用split和join。

let translator = {
  "you": "yaseelf",
  "I": "meseelf",
  "to": "yagatue",
  "the": "dee"
};

var button = document.querySelector('#button');
var input = document.querySelector('#input');
var output = document.querySelector('#output');

button.addEventListener('click', () => {
  let words = input.value.split(' ');
  let translated = words.map(word => translator[word] || word);
  output.innerHTML = translated.join(' ');
})

<input id='input' type=text value='Lets go to the park' />
<button id='button'>translate</button>

<div id='output'></div>