How can I replace a string in a paragraph with another string without using the .replace() method of javascript, and the reason I can not use the .replace() method is because it makes the replacement only with the first match of the word in the string, To put in context a little bit more why i can not use .replace(), im trying the create a marking function where the user is gonna be able to marker text in a document, the marker is gonna be storage on the server side, So i request for the markers of the documents, the marker object contain the start and the end position of the selection in the string, so i take those to values to extract the text and wrapped in to a mark tag, after that i need to replace the text already with the mark tag in to the original text, but there is the case where the user can select a word that is more than one time in the document, so i can not use replace, so i need to use the start and end position of the selection to .replace() the text, for example:
Lorem ipsum dolor sit amet, consectetur Lorem adipiscing elit. Vivamus ipsum Lorem eros, interdum ac cursus et, pulvinar Lorem at est. Integer nec rutrum ligula. In dignissim est a elit porttitor finibus.
and I want to replace the 3th 'Lorem' for 'Space' without touch the rest i can not use .replace(). Is there any other way to this, maybe using start and end position of a cursor selection?
/**
* Count the position and the number of the html tags
* to position the marker.
* @param {object} The chapter object
* @param {object} The marker object
* @return {object} Return the chapter with the marker on it.
*/
public characterCounter(chapter, marker): any {
const counters: any = {
htmlSimbol: null, // < or >
characters: 0,
startTags: 0, // count html until the start of the selection.
endTags: 0 // count html until the end of the selection.
};
/* Here we loop the blocks to find the righ
* one to place marker.
*/
chapter.blocks.some((block) => {
if (marker.blockId === block.blockId) {
/*
* Ones the block is founded start counting the
* characters from the string.
*/
const blockText = block.blockElement.text;
for (let i = 0; i < blockText.length; i++) {
/* when the loop reach the end of the selection
* and match with the number of characters counted
* that are not part of html tag the loop stop.
*/
if (counters.characters === marker.end) {
break;
} else {
/*
* if the loop crash wiht < then start counting
* characters as part of the html tags and stop
* when crash with >
*/
if (blockText[i] === '') {
counters.htmlSimbol = blockText[i];
} else if (blockText[i] !== '' && counters.htmlSimbol !== null) {
if (counters.htmlSimbol === '
if (counters.characters <= marker.start) {
counters.startTags += 1; // count the characters from the open html tags founded
} else {
counters.endTags += 1; // count the characters from the close html tags founded
}
} else if (counters.htmlSimbol === '>') {
if (counters.characters <= marker.start) {
counters.startTags += 2; // count the characters from the open html tags founded
} else {
counters.endTags += 2; // count the characters from the close html tags founded
}
counters.htmlSimbol = null; // change to null to know that is the end ot he html tag
}
} else if (counters.htmlSimbol === null) {
counters.characters += 1; // count the characters that are not part of html tag ( only text no html).
}
}
}
// Here is where i extract the text selected and wrapped in to the mark tag to then replaced on the original block of text
counters.endTags += counters.startTags;
marker.start += counters.startTags;
marker.end += counters.endTags;
const textSelected = blockText.substring(marker.start, marker.end);
const markerText = `${textSelected}`;
block.blockElement.text = blockText.replace(textSelected, markerText);
return false;
}
});
return chapter;
}
/**
* Analyze the text block and add the marking
* to the right block of text.
* @param {array} The list of markers
* @param {array} The array of blocks
* @return {array} the array of block with the markers.
*/
public addMarking(markersList, chaptersArray): any {
let index = 0;
markersList.some((marker) => {
index = chaptersArray.map((e) => e.id).indexOf(marker.chapterId);
if (index > -1) {
this.characterCounter(chaptersArray[index], marker);
return false;
} else {
chaptersArray.some((chapter) => {
index = chapter.subChapters.map((e) => e.id).indexOf(marker.chapterId);
if (index > -1) {
this.characterCounter(chapter.subChapters[index], marker);
return false;
}
});
}
});
return chaptersArray;
}
the problem is after i have the mark tag applied, after i apply the mark tag to the selected text, i need to replace the original text with the one with mark tag, as you can see in the code im using .replace(), so i have the problem that the user select a word the is more than one time in a long paragraph so the text is replaced on the wrong place.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
