如何从边界值中提取左上角和右下角坐标

Question

我正在尝试提取右上角的X和Y坐标&给定绑定值的文本框的左下角。

示例：[84,672][1356,889]

JavaScript中有没有一个快速简单的函数可以将上述值提取到两个单独的变量中，这样我就可以计算中心坐标了？类似：

A = [84,672]
B = [1356,889]

Answer 1

您可以使用RegEx:

const input = "[84,672][1356,889]";
// parse input
const nums = input.match(/d+/g).map(Number);
const A = [nums[0], nums[1]];
const B = [nums[2], nums[3]];
console.log(A, B);
// calculate midpoint
const mdpt = [(A[0]+B[0])/2, (A[1]+B[1])/2];
console.log(mdpt);

Answer 2

另一个选项是将字符串转换为有效的JSON字符串，以便：

"[84,672][1356,889]"

成为

"[[84,672],[1356,889]]"

您可以通过用], [替换][并用[]包装字符串来完成此操作。然后，您可以将此字符串解析为JavaScript数组，并使用索引将值提取到变量中：

const A = arr[0];
const B = arr[1];

或者，您可以使用如下所示的析构函数赋值将嵌套数组提取到变量中

const str = "[84,672][1356,889]";
const [A, B] = JSON.parse(`[${str.replaceAll("][", "],[")}]`);
console.log(A);
console.log(B);

注意：如果不能支持replaceAll()，可以使用带有.replace()方法的全局正则表达式：.replace(/][/g, '],[')

Answer 3

没有一个快速简单的函数可以做到这一点，没有。但你可以使用简单的字符串函数来制作自己的：

这里我使用了substring、indexOf、replace和split。

由于结果是一个数组，我使用map将原始字符串转换为数字，并使用析构函数赋值来获得结果。

const input = "[84,672][1356,889]";
function extractCoordinates(input) {
// get a and b as strings using indexOf with offset
const aStr = input.substring(0, input.indexOf('[', 1));
const bStr = input.substring(input.indexOf('[', 1), input.length);
// create a function that will remove the brackets and coerce to a number
const mapToNumber = (s) => +s.replace(/[|]/g, '');
// split the strings on the comma and run the function on the parts
const a = aStr.split(',').map(mapToNumber);
const b = bStr.split(',').map(mapToNumber);
// And that's it
return [a, b];
}
// Here I use array destructuring to get the results:
const [a, b] = extractCoordinates(input);
console.log(a, b);