Regexp won't work inside quotes - javascript

I use this Regexp to match text inside square brackets
/\[link\](.*)\[\/link\]/g
The text that I match
[link]The text goes here[/link]
The Regexp work's great when I test it in regex101 but when I use it in my website it doesn't work.
This is how I use it in my Website.
case 'untitle':
var html = '<script>$(document).ready(function(){var topic = $(".post-body div").text();
topic = topic.split(/\[link\](.*)\[\/link\]/g); $(".article-title a").attr("href", topic[1]);
});<\/script>';
break;
$('body').append(html);
I figure out that the Regexp doesn't work because it is inside quotes so I need a method to escape it and make it work.

Your issue is the fact that \ is an escape sequesnce so it is escaping the [ caharacter. You would need to double up the \\ in the string....
BUT the design is bad, it makes no sense to append JavaScript.
Well you are trying to run code for certain cases. It makes no sense why you are appending strings of code to the page.
function linkify () {
var topic = $(".post-body div").text();
topic = topic.split(/\[link\](.*)\[\/link\]/g); $(".article-title a").attr("href", topic[1]);
}
and the switch
case 'untitle':
linkify();
break;

Its not very clear what your exact problem is; but you are probably caught by the greediness of the regex. Basically, its matching entire [link]The text goes here[/link] foo [link] bar [/link] instead of just the first one. So you need to use \[link\](.*?)\[\/link\] instead.

Related

Regular expression to match a string which is NOT matched by a given regexp

I've been hoving around by some answers here, and I can't find a solution to my problem:
I have this regexp which matches everyting inside an HTML span tag, including contents:
<span\b[^>]*>(.*?)</span>
and I want to find a way to make a search in all the text, except for what is matched with that regexp.
For example, if my text is:
var text = "...for there is a class of <span class="highlight">guinea</span> pigs which..."
... then the regexp would match:
<span class="highlight">guinea</span>
and I want to be able to make a regexp such that if I search for "class", regexp will match "...for there is a class of..."
and will not match inside the tag, like in
"... class="highlight"..."
The word to be matched ("class") might be anywhere within the text. I've tried
(?!<span\b[^>]*>(.*?)</span>)class
but it keeps searching inside tags as well.
I want to find a solution using only regexp, not dealing with DOM nor JQuery. Thanks in advance :).
Although I wouldn't recommend this, I would do something like below
(class)(?:(?=.*<span\b[^>]*>))|(?:(?<=<\/span>).*)(class)
You can see this in action here
Rubular Link for this regex
You can capture your matches from the groups and work with them as needed. If you can, use a HTML parser and then find matches from the text element.
It's not pretty, but if I get you right, this should do what you wan't. It's done with a single RegEx but js can't (to my knowledge) extract the result without joining the results in a loop.
The RegEx: /(?:<span\b[^>]*>.*?<\/span>)|(.)/g
Example js code:
var str = '...for there is a class of <span class="highlight">guinea</span> pigs which...',
pattern = /(?:<span\b[^>]*>.*?<\/span>)|(.)/g,
match,
res = '';
match = pattern.exec(str)
while( match != null )
{
res += match[1];
match = pattern.exec(str)
}
document.writeln('Result:' + res);
In English: Do a non capturing test against your tag-expression or capture any character. Do this globally to get the entire string. The result is a capture group for each character in your string, except the tag. As pointed out, this is ugly - can result in a serious number of capture groups - but gets the job done.
If you need to send it in and retrieve the result in one call, I'd have to agree with previous contributors - It can't be done!

Wrap single pattern occurring more than one time in a string using Regex and JavaScript

I have this string:
whatever [that's the pattern] by [pattern again] before [whatever].
I would love to wrap the brackets [] and everthing inside them in a span to be like:
whatever <span>[that's the pattern]</span> by </span>[pattern again]</span>
before <span>[whatever]</span>.
I have tried
re = new RegExp(/\[(.*)\]/);
var newString = oldString.replace(re, "<span>$1</span>");
But this returns:
whatever <span>[that's the pattern] by [pattern again] before [whatever]</span>.
Before anyone shoot me about why shouldn't I use regex to parse HTML, the reason I am doing this is because this string is echoed on the web page and the brackets and the text within has different color. I need to wrap them in a span to be able to style them. If there's a better solution I am open.
Many thanks!
Aside from setting the global flag, you also need to make your regex lazy:
var newString = oldString.replace(/\[(.*?)\]/g, "<span>[$1]</span>")
^ ^
You need to set the global flag, which tells it to match more than once:
oldString.replace(/\[(.*)\]/g, ...)

Skipping over tags and spaces in regex html

I'm using this regex to find a String that starts with !?, ends with ?!, and has another variable inbetween (in this example "a891d050"). This is what I use:
var pattern = new RegExp(/!\\?.*\s*(a891d050){1}.*\s*\\?!/);
It matches correctly agains this one:
!?v8qbQ5LZDnFLsny7VmVe09HJFL1/WfGD2A:::a891d050?!
But fails when the string is broken up with html tags.
<span class="userContent"><span>!?v8qbQ5LZDnFLsny7VmVe09HJFL1/</span><wbr /><span class="word_break"></span>WfGD2A:::a891d050?!</span></div></div></div></div>
I tried adding \s and {space}*, but it still fails.
The question is, what (special?)characters do I need to account for if I want to ignore whitespace and html tags in my match.
edit: this is how I use the regex:
var pattern = /!\?[\s\S]*a891d050[\s\S]*\?!/;
document.body.innerHTML = document.body.innerHTML.replace(pattern,"new content");
It appears to me that when it encounters the 'plain' string it replaces is correctly. But when faced with String with classes around it and inside, it makes a mess of the classes or doesn't replace at all depending on the context. So I decided to try jquery-replacetext-plugin(as it promises to leave tags as they were) like this:
$("body *").replaceText( pattern, "new content" );
But with no success, the results are the same as before.
Maybe this:
var pattern = /!\?[\s\S]*a891d050[\s\S]*\?!/;
[\s\S] should match any character. I have also removed {1}.
The problem was apparently solved by using this regex:
var pattern = /(!\?)(?:<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])*?>)?(.)*?(a891d050)(?:<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])*?>)?(.)*?(\?!)/;

pattern matchin using javascript doesnt wrk when special characters and numbers come in between

I am trying to create a pattern matching to find word contents in an article for my website.. I am unable to make the pattern matchings when a special character or a number comes in between the words, I will add the jsfiddle link.. also is it possible to find the number of occurences and add a button which on clicking go to each occurence one by one...This is the way my pgrm is currently wrking http://jsfiddle.net/ehzPQ/12/
I think the problem has to do with the boundaries you choose for your words, I believe that with \b you are not taking into account the case where the word is has a dot before (like ".cancer9". But I'm really not an expert in regex... so, I worked a little bit and got this solution, but I'm not sure if it will work for you:
Javascript:
$(document).ready(function () {
var $test = $('#article');
var entityText = $('#entity').html().replace(/\./g, "\\\.").replace(/\$/g, "\\\$").replace(/\?/g, "\\\?"); //etc...
var entityRegularExpression =new RegExp("([^a-zA-Z0-9])(" + entityText + ")([^a-zA-Z0-9])", "gi");
var highlight = '$1<span class="highlight">$2</span>$3';
$test.html($test.html().replace(entityRegularExpression, highlight));
});
And here you have a working demo: http://jsfiddle.net/ehzPQ/20/
Let me know if it works for you.

RegExp: how to exclude matched groups from $N?

I've made a working regexp, but i think it's not the best use-case:
el = '<div style="color:red">123</div>';
el.replace(/(<div.*>)(\d+)(<\/div>)/g, '$1<b>$2</b>$3');
// expecting result: <div style="color:red"><b>123</b></div>
After googling i've found that (?: ... ) in regexps - means ignoring group match, thus:
el.replace(/(?:<div.*>)(\d+)(?:<\/div>)/g, '<b>$1</b>');
// returns <b>123</b>
but i need an expecting result from 1st example.
Is there a way to exclude 'em? just to write replace(/.../, '<b>$1</b>')?
This is just a little case for understanding how to exclude groups in regexp. And i know, what we can't parse HTML with regexp :)
So you want to get the same result while only using the replacement <b>$1</b>?
In your case just replace(/\d+/, '<b>$&</b>') would suffice.
But if you want to make sure there are div tags around the number, you could use lookarounds and \K like in the following expression. Except that JS does not support lookbehind nor \K, so you're out of luck, you have to use a capturing group for that in JS.
<div[^>]*>\K\d+(?=</div>)
There nothing wrong with a replacement value of '$1<b>$2</b>$3'. I would just change your regex to this:
el = '<div style="color:red">123</div>';
el.replace(/(<div[^>]*>)(\d+)(<\/div>)/g, '$1<b>$2</b>$3');
Changing how it matches the first div keeps the full match on the div tags, but makes sure it matches the minimum possible before the closing > of the first div tag rather than the maximum possible.
With your regex, you would not get what you wanted with this input string:
el = '<div style="color:red">123</div><div style="color:red">456</div>';
The problem with using something like:
el.replace(/\d+/, '<b>$&</b>')
is that doesn't work properly with things like this:
el = '<div style="margin-left: 10px">123</div>'
because it picks up the numbers inside the div tag.

Categories

Resources