Question

我知道这些问题的标题似乎含糊不清 - 但这是因为我根本不知道如何恰当地总结它。

我正在进行一个项目，我输入一些文本，然后将其翻译成其他内容。

如果我输入 4 ，则会转换为一词。

如果我输入 b4 ，则应转换为之前。

相反，它转换为 bfor ，因为它将变量 4 捕获为单独的变量。

我已经尝试更改订单，但它不起作用。这是正则表达式问题吗？

我的变量在JS中被识别出来。

var replaceValues = {
    '4' : 'for',
    'b4' : 'before'
}

$('.bs-text').keyup(function (event) {
    newText = event.target.value;
    for (var txt in replaceValues) {
        var temp = new RegExp(txt, 'gim');
        newText = newText.replace(temp, replaceValues[txt]);
    }
    $('.human-text').text(newText);
});

Answer 1

正如我在评论中所指出的那样，JS对象没有定义其键的顺序，因此当你知道字典会变得更大时，依靠这个并不是一个好主意。

在另一个SO问题中更多关于此问题：Does JavaScript Guarantee Object Property Order?

相反，使用具有您定义的顺序的简单数组。这个字典数组的排序也可以在JS中完成，你不需要自己处理它。

var replaceValues = [
  {key: '4', value: 'for'},
  {key: 'b4', value: 'before'},
];

// sort the values so longer keys go first
replaceValues.sort((a, b) => b.key.length - a.key.length);

$('.bs-text').keyup(function (event) {
    var newText = event.target.value;
    for (var txt in replaceValues) {
        var replacement = replaceValues[txt];
        var temp = new RegExp(replacement.key, 'gim');
        newText = newText.replace(temp, replacement.value);
    }
    $('.human-text').text(newText);
});

你也可以使用ES6 Map，它应该保证订单。但请注意，仅从Map：

创建Object是不够的

Map对象按插入顺序迭代其元素 - for循环返回每个迭代的[key，value]数组。

应该注意的是，作为对象地图的地图，尤其是字典字典，只会映射到对象的插入顺序 - 这是随机的而不是有序的。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#Objects_and_maps_compared

Answer 2

如评论中所述，您必须首先查找最长匹配。一种选择是从搜索词生成单个正则表达式，按长度排序，并use a callback以获得正确的替换值。

＆＃13;

var replaceValues = {
  '4': 'for',
  'b4': 'before'
};

// generates something equivalent to `/b4|4/gmi`
var pattern = new RegExp(
  Object.keys(replaceValues)
  .sort((a, b) => b.length - a.length)
  .join('|'),
  'gmi'
);

var newText = '4 me b4 me';
console.log(newText.replace(pattern, match => replaceValues[match]));

＆＃13;

这是有效的，因为正则表达式引擎从左到右匹配备选项（即如果b4匹配，则不会尝试匹配4）。不确定这个解决方案如何扩展到更多的搜索词，但它实际上可能更好，因为你只匹配字符串一次而不是n次，即正则表达式引擎不必遍历整个字符串多次。

Answer 3

对象属性在属性值

中具有":"个字符

$('.bs-text').keyup(function (event) {
    var newText = event.target.value;
    if (replaceValues[newText]) {
      $('.human-text').text(replaceValues[newText])
    };        
});

jsfiddle http://jsfiddle.net/je89deam/5/

JS变量将其他变量拉入其中

3 个答案: