Regex look-behinds in textcomplete.js - javascript

I have textcomplete.js plugin, that search all content after #...., with this regex:
/\B#([\-+\w]*)$/
I return text in span like this:
<span contenteditable="false" class="highlight">#example</span>
And in my text in web page I see it like this:
#example |
( | -> place of my cursor )
If go back with cursor like this:
#example|
textcomplete fires and show me drop down, but i don't need it, so i try to find way, to change my regex, so that it doesn't find #text when it starts with
<span>#text
I try this, in regex online, it works:
/\B^(?!\>)#([\-+\w]*)$/
But in my project doesn't work.
I tried something like this, but this is a bit too hard for me
Can anyone help me?
EDITED:
In few words
I want to find regex expression , that finds this:
#exampletext
But don't find this:
<span>#exampletext
When cursor is behind last character of the word

You could use something like this:
(^(?!#).).+
Example and explanation: http://regex101.com/r/jL2fH0/2
What it does here is checks to make sure the string doesn't begin with an # before matching the rest. Note that in this example I've added the gmi flags - you may not want to use these given your requirements, they're just in there to demonstrate the regex working.
Note too that we have to do this workaround since JavaScript doesn't support negative lookbehinds.

Related

RegEx for matching style tag

I have an HTML code that contain CSS code inside tag under the header tag. I want to use regex to extract all text in HTML, only pure text (between HTML tags ). I tried,
console.log(HTML_TEXT.replace(/(<([^>]+)>)/g, ""))
which replace every thing between <> by empty char, the problem is the CSS code inside STYLE tag is still there, so i want to know how to write the regular expression to remove CSS code inside tags.
How do I solve this problem?
This RegEx might help you to do so:
(\>)(.+)(<\/style>)
It creates a right boundary in a capturing group: (<\/style>)
It has a left boundary in another capturing group: (\>), which you can add additional boundaries to it, if you wish/necessary
Then, it has a no-boundary middle capturing group, (.+), where your target is located, and you can call it using $2 and replace it with an empty string, or otherwise.
I'm not so sure, did not test it, but your code might look like something similar to:
console.log(HTML_TEXT.replace(/(\>)(.+)(<\/style>)/g, '\\$1\\$3'))
This post explains how to do a string replace in JavaScript.
Edit:
Based on the comment, this RegEx might help you to filter your tags using $1:
(\<style type=\"text\/css\"\>)([\s\S]*)(\<\/style\>)

Regex - how to replace css when not inside of html

Alright, so I've been looking around for quite a while trying to figure out how to get this to work out. So what I'm trying to do is replace anything in strings that looks like this:
foo: bar;
But only if its not inside something like this:
<div style='foo: bar; ofoo: obar'>
So the basic idea is that I want to replace css when its not inside html style attributes. I understand that you can use a for loop and check it but I would like to do this with just the regex replace.
I'm using JavaScript Regex heres what my code attempt currently looks like:
\b(.*?):(|\s)(.*?);
https://regex101.com/r/LWohvu/1
Notes:
I understand that you could use a ^ to check if it starts with it but that only works for the first line.
If I didn't cover any needed any information please feel free to comment!
According to your description, you want to replace all style in your html page except those are inside of a html tag. I've updated your regex and this worked according to your need. Please check this.
Regex:
^(?!(\=|\<))(.*?):(.*?);
Regex in JavaScript:
/^(?!(\=|\<))(.*?):(.*?);/gm
All style start with style= if this exists inside of a html tag. So, I've tried to avoid those using ^(?!(\=|\<)). This represent not start with = and <. Avoid = for style and < for html tag.
Please check this in Updated Regex.

How do I allow <img> and <a> tags for innerHTML, but no others? (Making a forum)

I am currently programming a forum using only javascript (No JQuery please). I am doing very well, however, there is one issue I would love help with.
Currently I am getting the post from a database, assigning it to variable MainPost, and then attaching it to a div via a text node:
var theDiv = document.getElementById("MainBody");
var content = document.createTextNode(MainPost);
theDiv.appendChild(content);
This is working quite well, however, I would LOVE to be able to do this:
document.getElementById("MainBody").innerHTML += MainPost;
But I know this would allow people to use ANY html tag they want, even something like "script" followed by javascript code. This would be bad for business, obviously, but I do like the idea of allowing posters to use the "img" tag as well as the "a href" tags. Is there a way to somehow disable all tags except these two for the innerHTML?
Thank you all so much for any help you can offer.
Ok, the first thought that came to my mind when I read this question was to find a regular expression to exclude a specific string in a word. Simple search gave a lot of results from SO.
Starting point - To remove all the HTML tags from a string (from this answer):
var regex = /(<([^>]+)>)/ig
, body = "<p>test</p>"
, result = body.replace(regex, "");
console.log(result);
To exclude a string you would do something like this (again from all the source mentioned above):
(?!StringToBeExcluded)
Since you want to exlcude the <a href and <img tags. The suitable regex in your case could be:
(<(?![\/]?a)(?![\/]?img)([^>]+)>)
Explanation :
Think of it as three capturing groups in succession:
(?![\/]?a) : Negative Lookahead to assert that it is impossible to match the regex containing the string "a" prefixed by zero or one backslashes (Should take care of the a href tags)
(?![\/]?img) : Same as 1, just here it looks for the string "img". I don't know why I allowed the </img> tag. Yes, <img> doesn't have a closing tag. You could remove the [\/]? bit from it to fix this.
([^>]+) : Makes sure to not match > zero or one times to take care of tags that have opening and closing tags.
Now all these capture groups lie between < and >. You might want to try a regex demo that I've created incorporating these three capture groups to take care of ignoring all HTML elements except the image and link tags.
Sidenote - I haven't thoroughly given this regex a try. Feel free to play around with it and tweak it according to your needs. In any case, I hope this gets you started in the right direction.

How to highlight dates in a paragraph?

I'm trying to figure out how to select dates (note: all dates, not just specific dates) in a paragraph using (I'm assuming) jQuery/Javascript.
To give an example, the website gets a bunch of text from a database, and in that text is included a date in the following format: (DD/MM/YYYY). I just want to highlight everytime that comes up, but I'm not sure how because sometimes the date can be 02/09/2014 or 13/10/2014, so I can't just search for a certain date and highlight it.
Any help is appreciated :) Thanks!
I think what you may be looking for is something like this. Here is a jsFiddle Example
$("div").html($("div").html().replace(/(\d{1,2}\/\d{1,2}\/\d{4})/gi, "<span style='background-color:yellow;'>$1</span>"));
Here is the same code above only on different lines for easier reading.
$("div")
.html(
$("div")
.html()
.replace(/(\d{1,2}\/\d{1,2}\/\d{4})/gi,
"<span style='background-color:yellow;'>$1</span>"
)
);
First we group the regEx with a left and right parentheses. This is now able to be referenced as parameter $1. We then look for the pattern we are seeking (do not forgot to add the gi at the end so that you look for all occurrences, not just the first one.
We then replace our find with a span tag so that we can style the contents, in this case a yellow background and we still want the date we found so we add in the $1 to put the date inside the span tags.
Hope this helps
Here's a super basic regex that will find 'datelike' number series:
\d{1,2}/\d{1,2}/\d{4}
Try it out here: http://regexhero.net/tester/
Using some text like "This is some text for the regex hero on 9/2/2014. I think for the most part it will work for what you are looking for on 9/3/2014."
In fact, here's some javascript to play with (using jquery):
http://jsfiddle.net/5z7bz4zm/2/
<div>
This is some text for the regex hero on 9/2/2014. I think for the most part it will work for what you are looking for on 9/3/2014.
</div>
$(document).ready(function() {
$("div").text($("div").text().replace(/\d{1,2}\/\d{1,2}\/\d{4}/, "<span>caught ya</span>"));
});

JavaScript Regex formatting string

I'm having difficulties in executing what I want to achieve, it may just be sleep deprivation but it's more likely that regex is not my strong suit, I just can't quite get my head around it, but hopefully someone can give me a hand here.
I have the following string:
<span class="comment"><!--Some string\nsome other string\nsome more string--></span>
I need to format it so that it looks like this:
<span class="comment"><!--Some string</span>\n<span class="comment">some other string</span>\n<span class="comment">some more string--></span>
Now this would be really easy if this was the only string as I could do something like this:
/</span>\n<span class="comment">/gi
However the formatting should only happen if the corresponding open </span> has the class "comment" the other issue is that the open span tag with the class comment is not necessarily the first word of the string, there could be a string in-front of it and there could be infinitely many \n within the span...e.g. another variation could look like this:
<<span class="tag">string1\nstring2</span>><span class="comment"><!--string\nanother random string--></span>
No formatting should take place within the span with class tag, however formatting should take place in the span with class comment.
This is rather challenging for me to get my head around, the closest I have gotten is the following:
regex:
/<span class="comment">([^\<\/]*)\n/gi
replacement:
<span class="comment">$1</span>\n<span class="comment">
This gets close, as it formats the last line and first line within the span with class comment, but not the lines in between.
There may be javascript solutions to do this, but if at all possible I would prefer using regex.
Here you go,
str.replace (/<span\s+class="comment">.*<\/span>/ig, function (m) {
return m.replace (/\n/g, '</span>\n<span class="comment">');
});
Extract the span and its contents, then replace all the \n in that part.

Categories