How to get the match index in the string using javascript?

Question

how can i get the index of matching pattern in the string using javascript?

consider string original_string = "i am [1@some user] some more text [2@another user]"

i am using pattern /[\d+@(?[^]\r\n]*)]/g to match strings in square brackets

then i use string.matchAll(original_string) to get the matches

const matches = string.matchAll(original_string);
let names = [];
for (const match in matches) {
    names.push(match);
 }

 now the names array will contain ["some user", "another user"]
 now how do i get the index of the first match in original string from names array.

  const final_string = []
  const original_string = "i am [12@some user] some text [2@some user2]"
  let prev_match_pos = 0
  for each match in original_string 
      final_string.push(text from the end of prev match up until current 
      match start)
      final_string.push(<span>match</span>)
      update prev_match_pos

  final_string.push(text from the end of previous match to the end of the 
  original string)

I want to implement the above algorithm in javascript.

Basically i want to convert this string "i am [1@some user] some more text [2@another user]"

to

"i am <span>some user</span> some more text `another user'"

how can i do it?

the basic implementation is as below,

get the strings in brackets. from the string in brackets extract value after @ character. then embed the extracted value in span tag and place them in the original string.

could someone help me with this. thanks.

Please first try it yourself. Once you've tried it and have hit a problem, please post another question on SO with the specific problem you are having — ControlAltDel
– ControlAltDel, Commented Sep 4, 2019 at 16:42
i have explained where i am encountering problem. after finding matches i dont know how to replace them in the string. — someuser2491
– someuser2491, Commented Sep 4, 2019 at 16:49

Paulo Avelar · Accepted Answer · 2019-09-04 17:27:13Z

1

If you want to replace the [id@name] portion with the formatted name (e.g. <span>name</span>), you can use String.replace.

const text = 'i am [1@some user] some more text [2@another user]';
text.replace(/\[\d+@([A-z\s]*)\]/g, '<span>$1</span>');
// outputs: i am <span>some user</span> some more text <span>another user</span>

String.replace supports using capture groups in the newSubstr parameter (new substring).

answered Sep 4, 2019 at 17:27

Paulo Avelar

2,1501 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

weegee Over a year ago

Looks like you've changed something in the regex. Can you explain why were these changes needed? The approach seems like a nice one.

Paulo Avelar Over a year ago

Oh, yeah. I forgot about that. I had to escape both brackets because we need to match them literally. I could not make my browser accept the original regex, and I am not familiar with the ? and negating a match ^, so I assumed text with spaces ([A-z\s]+) would suffice. Symbols and numbers could be added as needed.

Anuja · Accepted Answer · 2019-09-04 17:38:52Z

1

You will need to improve the regex, this works well to for the given example,

let originalString = "i am [1@some user] some more text [2@another user]";

const matches = originalString.match(/[^[\]]+(?=])/g);
let newString = originalString;
matches.forEach(match => {
  newString = newString.replace(
    `[${match}]`,
    `<span>${match.split("@")[1]}</span>`
  );
});
console.log(newString);

answered Sep 4, 2019 at 17:38

Anuja

1,0387 silver badges12 bronze badges

Comments

Gabriele Magno · Accepted Answer · 2019-09-04 17:50:53Z

0

don't really know if this can help you but a quick solution could be:

HTML:

<div>
  <p>user 1 : <span id="first"></span></p>
  <p>user 2: <span id="second"></span></p>
</div>

<script>
let string = "first user is [1@user1] and second is [2@user2]";

let users = string.match(/[^[\]]+(?=])/g).map(el => el.split('@')[1]);

document.getElementById('first').innerText = users[0];
document.getElementById('second').innerText = users[1];
</script>

edited Sep 4, 2019 at 17:50

answered Sep 4, 2019 at 17:17

Gabriele Magno

1961 silver badge13 bronze badges

Collectives™ on Stack Overflow

How to get the match index in the string using javascript?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related