• javascript reg 不加入分组


    from :https://stackoverflow.com/questions/3512471/what-is-a-non-capturing-group-what-does-a-question-mark-followed-by-a-colon

    fter reading some tutorials I still don't get it.

    Could someone explain how ?: is used and what it's good for?

    Let me try to explain this with an example.

    Consider the following text:

    https://stackoverflow.com/
    https://stackoverflow.com/questions/tagged/regex

    Now, if I apply the regex below over it...

    (http|ftp)://([^/
    ]+)(/[^
    ]*)?

    ... I would get the following result:

    Match "https://stackoverflow.com/"
         Group 1: "http"
         Group 2: "stackoverflow.com"
         Group 3: "/"
    
    Match "https://stackoverflow.com/questions/tagged/regex"
         Group 1: "http"
         Group 2: "stackoverflow.com"
         Group 3: "/questions/tagged/regex"

    But I don't care about the protocol -- I just want the host and path of the URL. So, I change the regex to include the non-capturing group (?:).

    (?:http|ftp)://([^/
    ]+)(/[^
    ]*)?

    Now, my result looks like this:

    Match "https://stackoverflow.com/"
         Group 1: "stackoverflow.com"
         Group 2: "/"
    
    Match "https://stackoverflow.com/questions/tagged/regex"
         Group 1: "stackoverflow.com"
         Group 2: "/questions/tagged/regex"

    See? The first group has not been captured. The parser uses it to match the text, but ignores it later, in the final result.


    EDIT:

    As requested, let me try to explain groups too.

    Well, groups serve many purposes. They can help you to extract exact information from a bigger match (which can also be named), they let you rematch a previous matched group, and can be used for substitutions. Let's try some examples, shall we?

    Ok, imagine you have some kind of XML or HTML (be aware that regex may not be the best tool for the job, but it is nice as an example). You want to parse the tags, so you could do something like this (I have added spaces to make it easier to understand):

       <(?<TAG>.+?)> [^<]*? </k<TAG>>
    or
       <(.+?)> [^<]*? </1>

    The first regex has a named group (TAG), while the second one uses a common group. Both regexes do the same thing: they use the value from the first group (the name of the tag) to match the closing tag. The difference is that the first one uses the name to match the value, and the second one uses the group index (which starts at 1).

    Let's try some substitutions now. Consider the following text:

    Lorem ipsum dolor sit amet consectetuer feugiat fames malesuada pretium egestas.

    Now, let's use the this dumb regex over it:

    (S)(S)(S)(S*)

    This regex matches words with at least 3 characters, and uses groups to separate the first three letters. The result is this:

    Match "Lorem"
         Group 1: "L"
         Group 2: "o"
         Group 3: "r"
         Group 4: "em"
    Match "ipsum"
         Group 1: "i"
         Group 2: "p"
         Group 3: "s"
         Group 4: "um"
    ...
    
    Match "consectetuer"
         Group 1: "c"
         Group 2: "o"
         Group 3: "n"
         Group 4: "sectetuer"
    ...

    So, if we apply the substitution string...

    $1_$3$2_$4

    ... over it, we are trying to use the first group, add an underscore, use the third group, then the second group, add another underscore, and then the fourth group. The resulting string would be like the one below.

    L_ro_em i_sp_um d_lo_or s_ti_ a_em_t c_no_sectetuer f_ue_giat f_ma_es m_la_esuada p_er_tium e_eg_stas.

    You can use named groups for substitutions too, using ${name}.

    To play around with regexes, I recommend http://regex101.com/, which offers a good amount of details on how the regex works; it also offers a few regex engines to choose from.

  • 相关阅读:
    单位rem 触屏适配总结
    汉字转拼音插件:LM-PinYin.js
    PngOptimizer PNG压缩工具
    H5微信场景应用 audio模块
    LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖!
    js中的eval方法
    IE6利用iframe遮挡 弹层 select
    H5 video安卓默认点击不能全屏播放解决办法
    JS正则截取两个字符串之间的字符串
    定宽320 缩放适配手机屏幕
  • 原文地址:https://www.cnblogs.com/wangjixianyun/p/6941960.html
Copyright © 2020-2023  润新知