Question

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

我需要删除与以下规则不符的字符：

字符串必须以字母
第一个字符后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。 “）

所以，如果原始字符串是：

99％的人不是1％

然后删除非法字符的结果字符串为：

ofPeoplearenotthe1

任何人都可以帮我在Javascript中编写正则表达式，从字符串中删除不符合上述要求的字符吗？

Answer 1

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

Answer 2

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中使用它。

Answer 3

如果有人在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\\-\\:\\.]+", "");
    }

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

Answer 4

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

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

我不确定在哪个元素可以分配两个id属性，也不知道它的逻辑客观推理（当时可能是不太成熟的理解）虽然已经从标准中删除了但是多年来一直是网络开发社区的常识。

Answer 5

如果您想要能够抵御冲突的内容，请尝试使用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如何生成不同的键，而正则表达式不会生成。

Answer 6

John mentioned HTML5 spec allows all characters for IDs except whitespaces。

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

let str = "99% of People are not the 1%";
str = str.replace(/\s+/g, "");
// "99%ofPeoplearenotthe1%"

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

6 个答案: