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