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.
Related
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\>)
I'm building a Javascript based UI that generates code based on the UI. I got the code generation working. the code is saved in a string. I tried formatting it, indenting it, but I don't know how anymore. Is there a way to put out the code formatted?
For example if I have this string:
"<body><div><h1>Hi</h1></div></body>"
being output like this:
<body>
<div>
<h1>
Hi
</h1>
</div>
</body>
right now I'm outputing like this:
$(".output").text(string);
Take a look at code tag in html. Show your string wrapped by code tags
<code>your string</code>
Or use text area. https://jsfiddle.net/sureshatta/k1atgn6o/1/
If you are trying to achived the formatted output please have a look at Template literals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
.text() use for Change the Text of any Tag.
$(".output").text(string);
.html() is use for Add the String with the Tag.
$(".output").html(string);
If you want to display code that is correctly indented and colorized, you can use a library to do that, such as highlighjs.
I'm not sure it does auto indentation, but the algorithm for that isn't that hard: just add newline and enough spaces when opening a new html tag (recursion will make this way easier).
Also, you can use js-beautify.
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.
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.
I am working with a TiddlyWiki, and I want to make a custom formatter for a list. Basically I have an html tag called popuplist and I want to surround each line inside the tags with li tag and remove the popuplist tag. Could someone tell me how to do this? I can use jQuery, so that's not a problem.
You could search the TiddlyWiki HTML file for popuplist and wrap the line with the li tag by hand. Then you search and replace the popuplist tag with an empty string to remove it throughout the document.
Here is an answer that might work for the wrapping: https://stackoverflow.com/a/5744244/258482
var x = $('#xxx').wrapAll('<div></div>').parent().html();
or
var x = $('#xxx').clone().wrap('<div></div>').parent().html();
If I remember right, I eventually went another route, like tiddly markup or something like that.