Develop Reference

Replace a specific character from a string with HTML tags

Having a text input, if there is a specific character it must convert it to a tag. For example, the special character is *, the text between 2 special characters must appear in italic.
For example:
This is *my* wonderful *text*
must be converted to:
This is <i>my</i> wonderful <i>text</i>
So I've tried like:
const arr = "This is *my* wonderful *text*";
if (arr.includes('*')) {
arr[index] = arr.replace('*', '<i>');
}
it is replacing the star character with <i> but doesn't work if there are more special characters.
Any ideas?

You can simply create wrapper and thereafter use regular expression to detect if there is any word that is surrounded by * and simply replace it with any tag, in your example is <i> tag so just see the following
Example
let str = "This is *my* wonderful *text*";
let regex = /(?<=\*)(.*?)(?=\*)/;
while (str.includes('*')) {
let matched = regex.exec(str);
let wrap = "<i>" + matched[1] + "</i>";
str = str.replace(`*${matched[1]}*`, wrap);
}
console.log(str);

here you go my friend:
var arr = "This is *my* wonderful *text*";
const matched = arr.match(/\*(?:.*?)\*/g);
for (let i = 0; i < matched.length; i++) {
arr = arr.replace(matched[i], `<i>${matched[i].replaceAll("*", "")}</i>`);
}
console.log(arr);
an explanation first of all we're matching the regex globaly by setting /g NOTE: that match with global flag returns an array.
secondly we're looking for any character that lies between two astrisks and we're escaping them because both are meta characters.
.*? match everything in greedy way so we don't get something like this my*.
?: for non capturing groups, then we're replacing every element we've matched with itself but without astrisk.

How to find string in between special characters in a string and replace it as superscript

I have a title in the following format - test ^TM^ title test. I want to convert this text in such a way that the word enclosed between '^' as superscript without changing its position, as shown below.
testTMtitle test
Please help me.

A regex can do this for you, see the example below.
const
input = 'test ^TM^ title test',
// This regex will match any text between two "^" characters. The text
// between the "^" will be placed inside a capture group.
regex = /\^(.*?)\^/g,
// This replaces the match with the text from the capture group, wrapped in a sup tag.
htmlString = input.replace(regex, `<sup>$1</sup>`);
console.log(htmlString);
document.getElementById('output').innerHTML = htmlString;
<div id="output"></div>

Using javascript:
text = "test ^TM^ title test";
text.replace(/\^(.+?)\^/g,'$1'.sup());

I thinks you need to open your files in any HTML or PHP editor and use find and replace option.
For example: find ^TM^
Replace with: TM

string = "hello^TM^ hi";
isOdd = true;
newString = "";
for(i=0; i<string.length; i++){
if(string[i] == '^'){
if(isOdd){
newString += "<sup>";
} else {
newString += "</sup>";
}
isOdd = !isOdd;
} else{
newString += string[i];
}
}
//newString will have "hello<sup>TM</sup> hi"

How to highlight text by using regex

I'm trying writing a script to help highlight when match with regex. Below is my example that what I do now.
var text = "SOMETHING ~WEIRDs~ AND Not WEIRD";
var regexp = /\b(WEIRD)\b/
var matches = text.match(regexp);
for (i = 0; i < matches.length; i++) {
var replace_all = RegExp(matches[i] + "(?![^<]*>|[^<>]*<\/)", "ig");
text = text.replace(eval(replace_all), "<span style='background- color:yellow'>" + matches[i] + "</span>");
}
console.log(text);
The output of the code above is
SOMETHING ~<span style='background- color:yellow'>WEIRD</span>s~ AND Not <span style='background- color:yellow'>WEIRD</span>
The output I want is
SOMETHING ~WEIRDs~ AND Not <span style='background- color:yellow'>WEIRD</span>
I would like to know is that anyway to write a regex contains regex and words provided? Or have any other method can solve this incorrect replace issue.

Your outer regex is fine. The issue is with the inner replace_all regex in the loop , as it replaces all instances of the found string, no matter its position in the original string.
Instead use the original Regex with replace() using the matches within the replacement string, like this:
var text = "SOMETHING ~WEIRDs~ AND Not WEIRD";
var regexp = /\b(WEIRD)\b/
var text = text.replace(regexp, '<span style="background-color: yellow">$1</span>');
console.log(text);
Also, as a general rule, never, ever use eval(). There is always a better solution or alternative.

JavaScript Replace Text with HTML Between it

I want to replace some text in a webpage, only the text, but when I replace via the document.body.innerHTML I could get stuck, like so:
HTML:
<p>test test </p>
<p>test2 test2</p>
<p>test3 test3</p>
Js:
var param = "test test test2 test2 test3";
var text = document.body.innerHTML;
document.body.innerHTML = text.replace(param, '*' + param + '*');
I would like to get:
*test test
test2 test2
test3* test3
HTML of 'desired' outcome:
<p>*test test </p>
<p>test2 test2</p>
<p>test3* test3</p>
So If I want to do that with the parameter above ("test test test2 test2 test3") the <p></p> would not be taken into account - resulting into the else section.
How can I replace the text with no "consideration" to the html markup that could be between it?
Thanks in advance.
Edit (for #Sonesh Dabhi):
Basically I need to replace text in a webpage, but when I scan the
webpage with the html in it the replace won't work, I need to scan and
replace based on text only
Edit 2:
'Raw' JavaScript Please (no jQuery)

This will do what you want, it builds a regex expression to find the text between tags and replace in there. Give it a shot.
http://jsfiddle.net/WZYG9/5/
The magic is
(\s*(?:<\/?\w+>)*\s*)*
Which, in the code below has double backslashes to escape them within the string.
The regex itself looks for any number of white space characters (\s). The inner group (?:</?\w+>)* matches any number of start or end tags. ?: tells java script to not count the group in the replacement string, and not remember the matches it finds. < is a literal less than character. The forward slash (which begins an end html tag) needs to be escaped, and the question mark means 0 or 1 occurrence. This is proceeded by any number of white space characters.
Every space within the "text to search" get replaced with this regular expression, allowing it to match any amount of white space and tags between the words in the text, and remember them in the numbered variables $1, $2, etc. The replacement string gets built to put those remembered variables back in.
Which matches any number of tags and whitespace between them.
function wrapTextIn(text, character) {
if (!character) character = "*"; // default to asterik
// trim the text
text = text.replace(/(^\s+)|(\s+$)/g, "");
//split into words
var words = text.split(" ");
// return if there are no words
if (words.length == 0)
return;
// build the regex
var regex = new RegExp(text.replace(/\s+/g, "(\\s*(?:<\\/?\\w+>)*\\s*)*"), "g");
//start with wrapping character
var replace = character;
//for each word, put it and the matching "tags" in the replacement string
for (var i = 0; i < words.length; i++) {
replace += words[i];
if (i != words.length - 1 & words.length > 1)
replace += "$" + (i + 1);
}
// end with the wrapping character
replace += character;
// replace the html
document.body.innerHTML = document.body.innerHTML.replace(regex, replace);
}

WORKING DEMO
USE THAT FUNCTION TO GET TEXT.. no jquery required

First remove tags. i.e You can try document.body.textContent / document.body.innerText or use this example
var StrippedString = OriginalString.replace(/(<([^>]+)>)/ig,"");
Find and replace (for all to be replace add 1 more thing "/g" after search)
String.prototype.trim=function(){return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');};
var param = "test test test2 test2 test3";
var text = (document.body.textContent || document.body.innerText).trim();
var replaced = text.search(param) >= 0;
if(replaced) {
var re = new RegExp(param, 'g');
document.body.innerHTML = text.replace(re , '*' + param + '*');
} else {
//param was not replaced
//What to do here?
}
See here
Note: Using striping you will lose the tags.

How to find and replace text that is between certain keywords with javascript?

For example i have this text
"!?vake 7EnEebjP8jXf JFyd5hpIVa6B !?vake".
The starting and ending keyword is "!?vake" and i want to retrieve the encrypted content between the keywords,decrypt it and replace it.
The html code before replacing would be:
<span class="messageBody" data-ft="{"type":3}">‎!?vake 7EnEebjP8jXf JFyd5hpIVa6B
Fu63LH23dAiB !?vake</span>
and after decrypting :
<span class="messageBody" data-ft="{"type":3}">‎i am the decrypted text</span>
Replace should work in the whole html document without knowing the specific element the encrypted text is.

You can achieve this using RegExp. See a demo here : http://jsfiddle.net/diode/KVqJS/4/
var body = $("body").html();
var matched;
while ((matched = body.match(/!\?vake (.*?) !\?vake/))) {
if(matched.length > 1){
body = body.replace(/\!\?vake (.*) \!\?vake/, decode(matched[1]));
}
}
$("body").html(body);
function decode(encoded) {
return "decoded " + encoded;
}

You can use regex to find (and replace) the data.
Here is a quick and dirty JSFiddle: http://jsfiddle.net/z8rVc/1/
I'm sure someone will come up with a more elegant method, however.

You can use the following regex search and replace code in JS:
var a = "!?vake 7EnEebjP8jXf JFyd5hpIVa6B !?vake";
var b = a.replace(/\!\?vake(.*)\!\?vake/g, '$1');
/// b contains your string between the keywords which you can decrypt as required.