从DOM ID中删除非法字符的Javascript正则表达式

Javascript regex to remove illegal characters from DOM ID

本文关键字：字符 Javascript 正则表达式 非法 删除 DOM ID      更新时间：2023-09-26

我在网页上动态创建了许多DOM元素。它们的ID是从外部列表中生成的，有时这些名称可能包含ID的非法字符，如"@"或"&"。

我需要删除不符合以下规则的chracter：

  • 字符串必须以字母开头
  • 第一个字符后面可以跟任意数量的字母、数字（[0-9]）、连字符（"-"）、下划线（"_"）、冒号（"："）和句点（"."）

因此，如果原始字符串是：

99%的人不是1%的

然后，删除了非法字符的字符串将是：

不是的人

有人能帮我用Javascript编写正则表达式吗？它会从字符串中删除不符合上述要求的字符？

var str = "99% of People are not the 1%";
str = str.replace(/^[^a-z]+|[^'w:.-]+/gi, "");

HTML5规范已经更新，并根据https://html.spec.whatwg.org/multipage/dom.html#global-属性id属性现在可以包含其值的任何字符，空白除外。

在HTML元素上指定时，id属性值必须是唯一的在元素树中的所有ID中，并且必须至少包含一个字符。该值不得包含任何ASCII空白。

我不确定在哪一点上元素可以被分配两个id属性，也不确定它的逻辑客观推理（可能是当时不太成熟的理解），尽管这已经从标准中被否决了，但这已经是web开发社区多年来的常识了。

如果您想要能够抵抗冲突的东西，请尝试使用btoa转换为base64；

var badId1 = "99% of the 1%";
var badId2 = "999% of the 1%";
var validId1 = "ID_OTklIG9mIHRoZSAxJQ";
var validId2 = "ID_OTk5JSBvZiB0aGUgMS";
var makeId = function(text) { return "ID_" + btoa(text).slice(0,-2); }; 
expect(makeId(badId1)).toEqual(validId1);
expect(makeId(badId2)).toEqual(validId2);

请注意这两个IDS是如何生成不同的键的，而regex trim则不会。

var id = "99% of People are not the 1%";
id = id.replace(/[^a-z0-9'-_:'.]|^[^a-z]+/gi, "");

演示：http://jsfiddle.net/jfriend00/qqjh6/

这个想法是替换开头的一个或多个非字母字符，然后替换字符串其余部分的所有其他非法字符。

有人可能会问，即使拥有一个事先不知道的、基于内容动态生成的id，又有什么意义。如果它基于一些可以更改的内容，那么在CSS中就不能很好地使用它。

如果有人在Java中需要这个：

    if(! htmlId.matches("^[A-Za-z0-9]+[''w''-'':''.]*$")){
        LOG.warn("html id "+htmlId+" is not valid, have to remove all invalid chars");
        htmlId = htmlId.replaceAll("[^^A-Za-z0-9''w''-'':''.]+", "");
    }

在我的情况下，我检查了字符串，并用空白替换了所有无效的字符串。感谢Qtax。

正如John所提到的，HTML5规范允许ID中除了空白之外的所有字符。

这意味着以下RegEx（在JavaScript中）将足以遵循HTML5规范：

let str = "99% of People are not the 1%";
str = str.replace(/'s+/g, "");
// "99%ofPeoplearenotthe1%"
相关文章：