2

I wanna add HTML tags around a markup [x,y] with x and y change may vary. I try to use some Regex to get these texts but i don't have the desired result.

I use this proposition : Insert HTML into text node with JavaScript

In my page, there is

[x,y] markup who x and y are number between -99 and 99

This markup is write manually in a text editor and be part of content for an article related to a video game and there may be multiple markups in the same page.

So I need to replace all

 [x,y] to <em class="position">[x,y]</em>

I try these regex :

\[(.*?)\] (but add only <em> on . in the page)
\[0-9+\] (but add one <em> for each number in [x,y])

The objective is allow user to click on these elements to copy it to clipboard. (this second part works fine)

Anyone can help me ? :)

Improve this question
6
  • 1
    1) is the markup always varying/changing? 2) is the only constantly reliable pattern indeed just something like that ... <element ... ></element>? 3) if the markup does vary, can you please provide some more markup example code ... maybe some markup that really differs from each other? Commented Jun 28, 2020 at 11:59
  • 1
    Before one is going to upvotes this Q. one should maybe think about if this question was ask in a way that one really understands the OP's base problem. What was provided so far leaves more space for guessing than for coming up with a reliable approach. Commented Jun 28, 2020 at 12:05
  • Hi, the markup is [x,y] with x and y can be number positive or negative, like [-10,77] or [24,87] , technically, x and y can values are between -99 and 99 Commented Jun 28, 2020 at 12:08
  • Does any of the answers is what you're looking for? If not, please clarify. What should be the result for some common cases. Commented Jun 28, 2020 at 12:15
  • @SalakissODV ... This is not an answer. It just repeats the information already provided with the Q. Please edit your Q. in a way that one gets an understanding about the input data or the data that needs to be processed. Like is there already markup and where does it come from. If e.g. your text looks like this ... [10,24] or [14,-25] or [x,y] .., will the replacement be 3-times <em class="position">[x,y]</em>? Commented Jun 28, 2020 at 12:17

2 Answers 2

Reset to default
1

You can use .replace(), and pass it a regex. More explanation on the regex I used:

enter image description here (Courtesy of Regex101.com)

Demo:

var p = document.querySelector('p');

p.innerHTML = p.innerText.replace(/(\[-?\d+,-?\d+\])/g, '<em class="position">$1</em>');
.position { font-weight: bold; color: red; }
<p>[10,24] or [14,-25] or [x,y] (← these are not valid numbers)</p>

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

4 Comments

or replace(/(\[[^\]]+\])/g, '<em class="position">$1</em>');
@MoshFeu Oh, nice one! Thanks
@blex ... your regex matches beyond an ideal use case also every bracket-pair in e.g. [,], [ ], [x,], [x,y,z]. This might be reliable enough. The OP's Q was mentioning ... "The markup is [x,y] with x and y are number between -99 and 99." ... though.
@PeterSeliger you're right. That was mentionned by the OP after I answered. I'll edit the answer
1

You could use .match() function to extract the [x,y] combinations from the string and then replace these matched combinations with the <em> tag

Non-duplicate coordinates

If there are no duplicate coordinates in the text, then use following approach

const p = document.querySelector('p');
let str = p.textContent;
const regex = /(\[-?\d{1,2},-?\d{1,2}\])+/g;
const matches = str.match(regex);

matches.forEach(m => (str = str.replace(m, `<em class="position">${m}</em>`)));
p.innerHTML = str;
.position {
  color: blue;
}
<p>[10,24] or [14,-25] or [-100,-210] or [-99,99]</p>

Duplicate coordinates

If there are duplicate coordinates, then use following approach

const p = document.querySelector('p');
let str = p.textContent;
const regex = /(\[-?\d{1,2},-?\d{1,2}\])+/g;
const matches = str.match(regex);

matches.forEach((m, i) => {
  str = str.split(m).join(`<em class="position">${m}</em>`);
});

p.innerHTML = str;
.position {
  color: blue;
}
<p>[10,24] or [10,24] or [14,-25] or [14,-25] or [-100,-210] or [-99,99]</p>

Improve this answer

4 Comments

Note: this won't work with [10,24] or [10,24]. Good job on the -99 to 99 requirement, though
The match based approach is error prone to any coordinate-duplicate. While iterating the matches list any duplicate will be replaced again and again in str at its first occurrence; thus one does create nested markup for the first occurring coordinate and misses the ones that have not yet been and will never bee replaced in str.
@SalakissODV ... so far just a combination of Yousaf's regex and blex's approach would meet the OP's requirements.
Answer edited. Added an alternative approach to handle the string with duplicate coordinates

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.