Javascript用匹配的數組鍵替換字符串中的單詞

Question

我的問題有點簡單，但仍然不知道我實際上在哪里犯錯。

我正在嘗試替換字符串中的單詞。 我已經有一個包含鍵和值的數組。 用戶在輸入框中鍵入內容，如果輸入值與數組鍵匹配，則必須在字符串內替換鍵的相應值。 當我在文本框中輸入ast時，ast會被替換為“至少”數組值。 然后，在我繼續打字之后，如果我輸入了另一個詞，例如宇航員，那么問題就出現了，因為宇航員一詞還包含數組中已經存在的“ ast”，我不想替換宇航員，而只希望替換ast。

誰能指出我犯錯的地方。

以下是我的代碼...

 var down = document.getElementById('mtpo'); function rude(str) { var Obj = { ast: 'at least', ateo: 'at the end of ', ateot: 'at the end of the ', atsr: 'After the speakers remark, there will be a question-and-answer session', atst: 'at the same time', atto: 'attributable to', atx: 'after tax', av: 'average', avg: 'average', aw: 'associated with', awa: 'as well as', awd: 'as we discussed', aya: 'a year ago', aycs: 'as you can see', ba: 'be able to', bec: 'because', bey: 'by the end of the year', bly: 'basically', bn: 'billion', bng: 'begining', bns: 'business', }; var RE = new RegExp(Object.keys(Obj).join("|"), "gi"); down.value = str.replace(RE, function(matched) { return Obj[matched]; }); } $("#mtpo").keyup(function(event) { var text; if (event.keyCode == 32) { var text = rude($(this).val()); $(this).val(text); //$("someText").html(text); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="mtpo"></textarea> 

Answer 1

一種選擇是在您匹配的每個短單詞周圍添加單詞邊界。 例如，要匹配ast或ateo ，您將使用正則表達式

\b(?:ast|ateo)\b

只需對其余鍵重復該模式：

const patternStr = '\\b(?:' + Object.keys(Obj).join("|") + ')\\b';
const pattern = new RegExp(patternStr, "gi");

 var Obj = { ast: 'at least', ateo: 'at the end of ', ateot: 'at the end of the ', atsr: 'After the speakers remark, there will be a question-and-answer session', atst: 'at the same time', atto: 'attributable to', atx: 'after tax', av: 'average', avg: 'average', aw: 'associated with', awa: 'as well as', awd: 'as we discussed', aya: 'a year ago', aycs: 'as you can see', ba: 'be able to', bec: 'because', bey: 'by the end of the year', bly: 'basically', bn: 'billion', bng: 'begining', bns: 'business', }; const patternStr = '\\\\b(?:' + Object.keys(Obj).join("|") + ')\\\\b'; const pattern = new RegExp(patternStr, "gi"); function rude(str) { return str.replace(pattern, function(matched) { console.log('ok ', matched, Obj[matched]); return Obj[matched]; }); } $("#mtpo").keyup(function(event) { if (event.keyCode == 32) { var text = rude($(this).val()); $(this).val(text); //$("someText").html(text); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="mtpo"></textarea> 

Answer 2

也許匹配整個單詞將為您做到：類似：

\b(ast)\b

\\b在這里是“單詞邊界”。 因此，請嘗試此操作。

 const shortCuts = { ast: 'at least', ateo: 'at the end of ', ateot: 'at the end of the ', atsr: 'After the speakers remark, there will be a question-and-answer session', atst: 'at the same time', atto: 'attributable to', atx: 'after tax', av: 'average', avg: 'average', aw: 'associated with', awa: 'as well as', awd: 'as we discussed', aya: 'a year ago', aycs: 'as you can see', ba: 'be able to', bec: 'because', bey: 'by the end of the year', bly: 'basically', bn: 'billion', bng: 'begining', bns: 'business', }; const re = new RegExp( Object.keys(shortCuts) .map(key => `\\\\b${key}\\\\b`) .join("|"), "gi"); function replace(word) { return word.replace(re, matched => shortCuts[matched]); } const testStrings = ['I want ast this to be replaced', 'But not the astronaut']; testStrings.forEach(str => console.log(replace(str)));