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.
Related
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.
in google script I am trying to replace a %string basing on the character following it.
I've tried using:
var indexOfPercent = newString.indexOf("%");
and then check the character of indexOfPercent+1, but indexOf returns only the first occurrence of '%'.
How can I get all occurrences? Maybe there is easier way to do that (regular expressions)?
EDIT:
Finally I want to replace all my % occurrences to %%, but not if percent sign was part of %# or %#.
To sum up: my string: Test%# Test2%s Test3%. should look like: Test%# Test2%s Test3%%.
I've tried using something like this:
//?!n Matches any string that is not followed by a specific string n
//(x|y) Find any of the alternatives specified
var newString = newString.replace(\%?![s]|\%?![%], "%%")
but it didn't find any strings. I am not familiar with regex's, so maybe it is a simple mistake.
Thanks
Try this code:
// replace all '%'
var StrPercent = '%100%ffff%';
var StrNoPersent = StrPercent.replace(/\%/g,'');
Logger.log(StrNoPersent); // 100ffff
Look for more info here
Edit
In your case you need RegEx with the character not followed by group of characters. Similiar question was asked here:
Regular expressions - how to match the character '<' not followed by ('a' or 'em' or 'strong')?
Thy this code:
function RegexNotFollowedBy() {
var sample = ['Test%#',
'Test2%s',
'Test3%',
'%Test4%'];
var RegEx = /%(?!s|#)/g;
var Replace = "%%";
var str, newStr;
for (var i = 0; i < sample.length; i++) {
str = sample[i];
newStr = str.replace(RegEx, Replace);
Logger.log(newStr);
}
}
I'll explain expression /%(?!s|#)/g:
% -- look '%'
(text1|text2|text3...|textN) -- not followed by text1, 2 etc.
g -- look for any accurance of searched text
I want to write a JavaScript function which converts some simple BBcode Tags like [red] [/red] to Html-Tags. I think the replace() function is the best way to do it. I wrote a simple testfunction to try it, but it does not seem to work.
/**
* #function
* #description Replaces the bb-tags with html-tags
*/
function bbToHtml(form) {
debugger
var text = form.text.value;
bbTags = new Array("[red]", "[yellow]", "[green]", "[/red]", "[/yellow]", "[/green]");
htmlTags = new Array("<font color='red'>", "<font color='yellow'>", "<font color='green'>", "</font>", "<font>", "</font>");
for (var i = 0; i < bbTags.length; i++) {
var re = new RegExp(bbTags[i], "g");
text = text.replace(re, htmlTags[i]);
}
alert(text);
}
It should convert "[red]hello[/red]" to "<font color='red'>hello</font>", but it just gives me a weird string.
What is wrong? I think this has something to do with my regular expression.
[ and ] have special meaning in regular expressions and need to be escaped, moreover you do not need regular expressions the way you've written your code and can just do:
function bbToHtml(form) {
debugger
var text = form.text.value;
bbTags = new Array("[red]", "[yellow]", "[green]", "[/red]", "[/yellow]", "[/green]");
htmlTags = new Array("<font color='red'>", "<font color='yellow'>", "<font color='green'>", "</font>", "<font>", "</font>");
for (var i = 0; i < bbTags.length; i++) {
while(text.indexOf(bbTags[i])!==-1){
text = text.replace(bbTags[i], htmlTags[i]);
}
}
alert(text);
}
Just to let you know, you can use array literals so instead of arrays. new Array(comma seperated values) is identical to [comma seperated values] in javascript.
Also, you can use your array like a map in your case, for example:
var bbTagsToHTML = {}
bbTagsToHtml["[red]"] = "<font color='red'>"
and iterate through that.
If you would like you can escape your regular expressions too, please see How do you use a variable in a regular expression? for a function that does that.
You can also do that manually. "[red]" becomes "\[red\]" (the bracket escaped).
just change this line
text = text.replace(re, htmlTags[i]);
into
text = text.replace(bbTags[i], htmlTags[i]);
removing unuseful code.
replace works also on 'normal' (not regex) values as argument.
If you want to do it with regex you can simplify a lot. No arrays or loops:
var str = '[red]foo[/red] hello world [blue]hey[/blue]',
re = /\[(\w+)\](.*)\[\/\1\]/g;
str = str.replace(re, '<font color="$1">$2</font>');
console.log(str);
//^ <font color="red">foo</font> hello world <font color="blue">hey</font>
Also, as a side note, font is rarely used anymore I'd suggest you use a span with a class.
I am using the following regular expression in Javascript:
comment_body_content = comment_body_content.replace(
/(<span id="sc_start_commenttext-.*<\/span>)((.|\s)*)(<span id="sc_end_commenttext-.*<\/span>)/,
"$1$4"
);
I want to find in my HTML code this tag <span id="sc_start_commenttext-330"></span> (the number is always different) and the tag <span id="sc_end_commenttext-330"></span>. Then the text and HTML code between those tags should be deleted and given back.
Example before replacing:
Some text and code
<span id="sc_start_commenttext-330"></span>Some text and code<span id="sc_end_commenttext-330"></span>
Some Text and code
Example after replacing:
Some text and code
<span id="sc_start_commenttext-330"></span><span id="sc_end_commenttext-330"></span>
Some text and code
Sometimes my regular expression works and it replaces the text correctly, sometimes not - is there a mistake? Thank you for help!
Alex
You should use a pattern that matches the start with its corresponding end, for example:
/(<span id="sc_start_commenttext-(\d+)"><\/span>)[^]*?(<span id="sc_end_commenttext-\2"><\/span>)/
Here \2 in the end tag refers to the matched string of (\d+) which matches the digits 330 in the start tag. [^] is a simple expression for any character.
Using DOM.
var $spans = document.getElementsByTagName("span");
var str = "";
for(var i = 0, $span, $sibling; i < $spans.length; ++i) {
$span = $spans[i];
if(/^sc_start_commenttext/i.test($span.id)) {
while($sibling = $span.nextSibling) {
if(/^sc_end_commenttext/i.test($sibling.id)) {
break;
}
str += $sibling.data;
$span.parentNode.removeChild($sibling);
}
}
}
console.log("The enclosed string was: ", str);
Here you have it.
I would start to replace .* with [0-9]+"> -- if I understand correctly your intention.
I agree that it's normaly a bad ide to use regexp to parse html but it can be used effectly on non-nested html
Using RegExp:
var str = 'First text and code<span id="sc_start_commenttext-330"></span>Remove text<span id="sc_end_commenttext-330"></span>Last Text and code';
var re = /(.*<span id="sc_start_commenttext-\d+"><\/span>).*(<span id="sc_end_commenttext-\d+"><\/span>.*)/;
str.replace(re, "$1$2");
Result:
First text and code<span id="sc_start_commenttext-330"></span><span id="sc_end_commenttext-330"></span>Last Text and code
I'm trying to write a "suggestion search box" and I cannot find a solution that allows to highlight a substring with javascript keeping the original case.
For example if I search for "ca" I search server side in a case insensitive mode and I have the following results:
Calculator
calendar
ESCAPE
I would like to view the search string in all the previous words, so the result should be:
Calculator
calendar
ESCAPE
I tried with the following code:
var reg = new RegExp(querystr, 'gi');
var final_str = 'foo ' + result.replace(reg, '<b>'+querystr+'</b>');
$('#'+id).html(final_str);
But obviously in this way I loose the original case!
Is there a way to solve this problem?
Use a function for the second argument for .replace() that returns the actual matched string with the concatenated tags.
Try it out: http://jsfiddle.net/4sGLL/
reg = new RegExp(querystr, 'gi');
// The str parameter references the matched string
// --------------------------------------v
final_str = 'foo ' + result.replace(reg, function(str) {return '<b>'+str+'</b>'});
$('#' + id).html(final_str);
JSFiddle Example with Input: https://jsfiddle.net/pawmbude/
ES6 version
const highlight = (needle, haystack) =>
haystack.replace(
new RegExp(needle, 'gi'),
(str) => `<strong>${str}</strong>`
);
nice results with
function str_highlight_text(string, str_to_highlight){
var reg = new RegExp(str_to_highlight, 'gi');
return string.replace(reg, function(str) {return '<span style="background-color:#ffbf00;color:#fff;"><b>'+str+'</b></span>'});
}
and easier to remember...
thx to user113716: https://stackoverflow.com/a/3294644/2065594
While the other answers so far seem simple, they can't be really used in many real world cases as they don't handle proper text HTML escaping and RegExp escaping. If you want to highlight every possible snippet, while escaping the text properly, a function like that would return all elements you should add to your suggestions box:
function highlightLabel(label, term) {
if (!term) return [ document.createTextNode(label) ]
const regex = new RegExp(term.replace(/[\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi')
const result = []
let left, match, right = label
while (match = right.match(regex)) {
const m = match[0], hl = document.createElement('b'), i = match.index
hl.innerText = m
left = right.slice(0, i)
right = right.slice(i + m.length)
result.push(document.createTextNode(left), hl)
if (!right.length) return result
}
result.push(document.createTextNode(right))
return result
}
string.replace fails in the general case. If you use .innerHTML, replace can replace matches in tags (like a tags). If you use .innerText or .textContent, it will remove any tags there were previously in the html. More than that, in both cases it damages your html if you want to remove the highlighting.
The true answer is mark.js (https://markjs.io/). I just found this - it is what I have been searching for for such a long time. It does just what you want it to.
I do the exact same thing.
You need to make a copy.
I store in the db a copy of the real string, in all lower case.
Then I search using a lower case version of the query string or do a case insensitive regexp.
Then use the resulting found start index in the main string, plus the length of the query string, to highlight the query string within the result.
You can not use the query string in the result since its case is not determinate. You need to highlight a portion of the original string.
.match() performs case insensitive matching and returns an array of the matches with case intact.
var matches = str.match(queryString),
startHere = 0,
nextMatch,
resultStr ='',
qLength = queryString.length;
for (var match in matches) {
nextMatch = str.substr(startHere).indexOf(match);
resultStr = resultStr + str.substr(startHere, nextMatch) + '<b>' + match + '</b>';
startHere = nextMatch + qLength;
}
I have found a easiest way to achieve it. JavaScript regular expression remembers the string it matched. This feature can be used here.
I have modified the code a bit.
reg = new RegExp("("+querystr.trim()+")", 'gi');
final_str = 'foo ' + result.replace(reg, "<b>&1</b>");
$('#'+id).html(final_str);
Highlight search term and anchoring to first occurence - Start
function highlightSearchText(searchText) {
var innerHTML = document.documentElement.innerHTML;
var replaceString = '<mark>'+searchText+'</mark>';
var newInnerHtml = this.replaceAll(innerHTML, searchText, replaceString);
document.documentElement.innerHTML = newInnerHtml;
var elmnt = document.documentElement.getElementsByTagName('mark')[0]
elmnt.scrollIntoView();
}
function replaceAll(str, querystr, replace) {
var reg = new RegExp(querystr, 'gi');
var final_str = str.replace(reg, function(str) {return '<mark>'+str+'</mark>'});
return final_str
}
Highlight search term and anchoring to first occurence - End