Question

我正在尝试用svg创建一个交互式图形，其中包含节点的边和圆的路径。要查找节点的子节点，我希望能够使用特定的正则表达式搜索边缘以查找具有特定正则表达式的ID，因为这些节点都是以下形式：“node1_id node2_id”。我已经尝试了许多解决方案，包括美元符号并将正则表达式直接放入id的find元素中，但我没有运气。我找不到其他任何可以解决这个问题的事情，而且我对前端交易还很陌生，所以我不确定这是不是特定于svg的特定内容。

$$('path[id^="\b10020 ([\d]+)"')
Error: SYNTAX_ERR: DOM Exception 12

document.getElementById("\b10020 ([\d]+)")
null

可能是我做过的两个最明智的尝试。在这种情况下，node1_id的所有边都是10020。

<path fill="none" stroke-width="1.0"
              d="M -1026.321777,958.875610 C -987.123413,912.258789 -858.400574,901.130981 -811.783752,940.329346"
              id="10020 12050" stroke-opacity="1.0" stroke="#7dcb3c"/>

作为一个应该返回匹配的边缘的例子。

Answer 1

如果我这样做，我会将标记更改为：

<path fill="none" stroke-width="1.0"
      d="M -1026.321777,958.875610 C -987.123413,912.258789 -858.400574,901.130981 -811.783752,940.329346"
      data-node-1="10020" data-node-2="12050" stroke-opacity="1.0" stroke="#7dcb3c"/>

然后使用“单一美元符号”（aka，jQuery）：

$('path[data-node-1="10020"]')

Answer 2

没有CSS选择器接受正则表达式，即使在下一个level 4 version也没有。 [foo^=bar]表示“foo属性值恰好以字符串bar”开头的元素。你可以做几件事：

如果您想要的是ID为10020的节点，那么您可以使用$$("path[id^='10020 ']")，但这会接受不会继续使用其他数字的ID
如果您希望10020值显示在ID中，无论位置如何，请使用path[id~='10020']选择器
如果你真的需要使用正则表达式，那么你必须自己走树，只过滤你感兴趣的元素;你可以根据上面的一个选择器通过预过滤来优化一点，这样你就必须只检查以10020开头的元素

但是，您的用例存在一个大问题： ID可能不包含空格，这是一个无效的SVG文档。您必须使用除id之外的其他属性，可能class更适合您，或者如果这些数字存在语义含义，请定义您自己的命名空间并在该命名空间中使用新属性。

如果您使用class，那么您的选择器也会变得更简单：$$("path.10020")

如何使用正则表达式按类获取svg元素

2 个答案: