How to take care duplication while replacing string?

Question

I am having one issue, I need to replace the selected text with some HTML for annotation functionality. I reach upto replacing the text. but now the issue is document may contain repetitive string and when I tried to replace it, its always replace first instance in paragraph. My code is give below.

Need to replace all the annotation from json at respective position. Can anyone help me how to replace/insert text at precise location?

for (var i = 0; i < AnnotationDetails.length; i++)
        {
            //locate the string between start and end point
            var TextToReplace = OutPutText.substring(AnnotationDetails[i].start, AnnotationDetails[i].end);
            //prepare replace text
            var AnnotationClass = '<mark data-entity="' + AnnotationDetails[i].label + '" data-id="' + AnnotationDetails[i]._id + '">' + TextToReplace + '</mark>';
            var AnnotationText = $('.output').html();
            //put text back as html to div
            $('.output').html(AnnotationText.replace(TextToReplace, AnnotationClass));
        }

Below given the json.

"annotations": [
        {
            "_id": "FWFpjaec",
            "start": "6123",
            "end": "6155",
            "label": "support"
        }
    ]

I have paragraph where string "Planning and Conservation League" available at two location. so whenever I try to replace second instance, javascript always replace first one. Start and end point in json is precise, but any way to replace it at precise location??

Thanks for link, but my issue is I need to replace string at specific location. I am reading & parsing file, then output available inside div. After that one can select some chunk of text and apply annotation. But issue arise when someone select chunk which is available before in file, that time javascript replace that first occurrence instead of selected one. — Bhargav Bhanderi, Jun 20 '17 at 05:58

nikoss · Answer 1 · 2017-06-20T06:13:12.777

If I understand correctly you have a regex issue. String.replace the method can accept a regex as well as the first param.

So since I have no clue what textToReplace is in your code I am giving you my example to understand better.

const q=el=>document.querySelector(el);//dont mind this line

const txt=q("div").innerText;
console.log(txt)//test test test

const strOne=txt.replace("test","hey")//this will change the first one only
q("#stringAsFirstParam").innerText=strOne

const regexOne=txt.replace(/test/g,"hey")//i set the global flag as well so it wont stop afther the first match

q("#regexAsFirstParam").innerText=regexOne

<div>test test test</div>

<div id="stringAsFirstParam"></div>
<div id="regexAsFirstParam"></div>

so just run the snippet to understand and check the code

Since you ask for replacing a particular occurrence only I prepared another snippet, check this out please

 const q=el=>document.querySelector(el);//dont mind this line

const txt=q("div").innerText;
console.log(txt)//test test test

const strOne=txt.replace("test","changed");//this will change the first one only
q("#stringAsFirstParam").innerText=strOne

const regexOne=txt.replace(/test/g,"changed");//i set the global flag as well so it wont stop afther the first match

q("#regexAsFirstParam").innerText=regexOne

let count=0
const WhichOneDoINeed=2
let current=0
const secondOnly= txt.replace(/test/g,function(match){
  if (++current==WhichOneDoINeed){
    return "changed"
  }
  return match
  
})
q("#secondOnly").innerText=secondOnly

<div>test test test</div>

<div id="stringAsFirstParam"></div>
<div id="regexAsFirstParam"></div>
<div id="secondOnly"></div>

My issue is I need to replace the only second occurrence not all the occurrence. As my current functionality always replacing first occurrence with the HTML I am giving. its ignoring second occurrence entirely. — Bhargav Bhanderi, Jun 20 '17 at 05:56
I hope this helps. @BhargavBhanderi. If it does please mark the question as solved. — nikoss, Jun 20 '17 at 06:13

How to take care duplication while replacing string?

1 Answers1