Question 221880 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Find html tags with specific attribute and enclose text in curly brackets

I have to find any html tags with the attribute i18n in VsCode and then enclose it’s static text inside curly brackets. Like so:

<p i18n>something</p>
<p i18n>{something | odd}</p>

I’ve spent hours looking around for regex that would work and so far had no luck.

Tags:

2

Answers


  1. 0

    I think this might work (not extensively tested, and I won’t be surprised if I’ve made any mistakes):

    Put this in the search field and enable regex search mode: (<w+ i18n( w+)?>)([^<]*)(</w>). Put this in the replace field: $1{$3}$4.

    If you want to ignore things that already have a pair of content curly braces, then use (<w+ i18n( w+)?>)([^{][^<]*[^}])(</w>) in the search field.

    Login or Signup to reply.
  2. 0

    If the <p> tags contain other tags you must capture all content till the first </p> text.

    Don’t select the <p> tags where the content starts with a { using (?!{)

    Regex find:

    (<p(?: [^>]+)? i18n(?: [^>]+)?>)(?!{)(.*?)(</p>)

    Replace with:

    $1{$2}$3

    This does not work if you want to do it with <div> tags because they can contain <div> tags. Then you need a HTML parser like Emmet.

    Regex find:

    (<div(?: [^>]+)? i18n(?: [^>]+)?>)(?!{)

    • with cursor in find widget: Alt_Enter to select all occurrences
    • place all cursors after the selections: ArrowRight
    • select the content of <div> tag: execute command: Emmet: Balance Outward
    • remove <div> content: Ctrl+X
    • type what you want before the content: foobar or could be an Emmet expression and Tab
    • paste in the content: Ctrl+V
    • type what you want after the content, if using an Emmet expression skip this
    • leave Multi Cursor: Esc
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search