JS正则如何精确匹配innerHTML变量中的ft-file完整字符串

你当前的正则写法逻辑有误：

• 正则里的^表示匹配字符串的起始位置，$表示匹配字符串的结束位置，/^ft-file$/只有在**整个待检测字符串完全等于ft-file**时才会返回true
• 你获取到的innerHTML是包含换行、路径内容的长文本，不可能完全等于ft-file，因此始终返回false
• 另外如果直接用text.includes('ft-file')会出现误判，ft-file2这类包含ft-file子串的内容也会被判定为匹配，不符合你的要求。

用带单词边界的正则即可满足需求，既可以在长文本中找到ft-file片段，又不会匹配前后带字母/数字/下划线的衍生字符串：

let text = document.getElementsByClassName("fulltext")[0].innerHTML;
const reg = /\bft-file\b/;

if (reg.test(text)) {
    console.log("true");
} else {
    console.log("false")
}

你可以用下面的HTML结构测试效果：

<div class="fulltext">
   [test="data/ft-file/images/small/red"]
</div>

运行后控制台会正确输出true。

匹配规则说明 #

• 返回true的场景：文本中存在独立的ft-file片段，比如你示例里的data/ft-file/images/small/red、独立的ft-file字符串、被空格/斜杠/标点包裹的ft-file
• 返回false的场景：ft-file2、ft-fileabc、xft-file这类前后紧接字母/数字的衍生字符串

如果需要适配更严格的场景（比如_ft-file、ft-file_这类带下划线的情况也不想匹配），可以用负向环视的正则写法：

const reg = /(?<![a-zA-Z0-9-])ft-file(?![a-zA-Z0-9-])/;

内容的提问来源于stack exchange，提问作者Keroster