React Hooks中如何用正则正确移除图片路径的..\public\前缀

你当前使用的正则/[^..\public\]/g存在语法和逻辑错误，无法实现预期替换效果：

• 正则中[^字符集]的语法是匹配所有不在指定字符集合内的字符，你写的这段正则实际执行逻辑是把所有不属于.、p、u、b、l、i、c、\的字符全部删除，和“移除开头固定路径片段”的需求完全不符。
• 正则中的.默认是匹配任意字符的通配符，\是转义符，你没有对这两个特殊字符做转义，无法匹配字面意义的点和反斜杠。
• 没有添加字符串起始锚点，就算匹配规则写对，也可能误删路径中间出现的同名片段。

直接替换正则规则即可，匹配字符串开头的..\public\片段做删除，正确的replace逻辑如下：

<img src={photo.replace(/^\.\.\\public\\/, "")} />

正则规则说明：

• ^：锚定字符串起始位置，保证只替换路径最开头的片段，不会误改后续路径内容
• \.：转义后匹配字面意义的点号，连续两个\.对应路径开头的两个点
• \\：转义后匹配字面意义的反斜杠\（JS和正则语法中反斜杠都是转义符，要匹配真实反斜杠必须写双反斜杠转义）
• public：匹配字面的public字符串，最后追加的\\对应public后面的反斜杠
• 整段匹配到的开头..\public\会被替换为空字符串，最终输出你需要的images\photo-1654221497889.png结果。

如果需要兼容不同系统下正斜杠/反斜杠的路径写法，可以把正则调整为/^\.\.[\\/]public[\\/]/，同时适配../public/和..\public\两种路径格式，避免环境差异导致的路径加载错误。

{
searchResults.slice(0, loadRequests).map(({id, photo, name }) => (
    <div className='row'>
        <div className="playerRow"> 
            <label key={id}>
                <div className="row">
                    <div className="checkStyle1">
                        <input type="checkbox" />
                    </div>
                    <div className="plyPhoto">
                        <img src={photo.replace(/^\.\.\\public\\/, "")} />
                    </div>
                     <div className="plyName">
                        <div>{name}</div>
                    </div>
                </div>
            </label>
        </div>  
    </div>  
))}

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