Given this text:
<span class='green'>foobar</span> something <span class='red'>fizzle</span>
I need to somehow attain this:
<tagA>foobar</tagA> something <tabB>fizzle</tagB>
I basically have to match <span class='green'>*anything*</span> and be able to differentiate it from the red one as well. I have to take this green span on both ends and replace it with a fixed string, but somehow retain whatever text is between the two tags.
I swear I've looked around a ton but have no idea how to find the solution for this with regex.
This should do the trick
Replace
<span class='green'>(.*?)</span>
With
<tagA>$1</tagA>
And do something similar for the class with the value red
Update 1
Response to feedback "What if something contains a newline?"
If I remember correctly JavaScript does not support the "single line mode" / Dot matches line breaks.
<span class='green'>([\s\S]*?)</span>
Update 2
This tweaked regex allows
<span\s+class\s*=\s*['"]green['"]\s*>([^>]*)</\s*span\s*>
white space where the html spec is allowing it
accepts single as well as double quotes for the attribute values
matches the value between the tags using a negated character class which is qualified greedy resulting in better performance generally and is also supported by JavaScript
Related
If I grab some html from one element, then attempt to assign it as the text content of another element, newlines are not preserved (at least not in the latest Firefox and Chromium).
So, for example, the follow code (with sensible html) produces output where the newlines are replaced by spaces. Well, except the alert, which works as expected.
$("#info").data("html", $("#info").html());
$("#jquery").text($("#info").data("html"));
document.getElementById("javascript").textContent = $("#info").data("html");
$("#alert").click(function() { alert($("#info").data("html")) });
Here's a running example: http://jsfiddle.net/76S7z/2/
There should be some method of setting the html of one element as the text of another while preserving newlines properly.
Is this possible with "text" or "textContent"? Is there an alternative way to do this? Is there a simple workaround? A less than simple workaround?
As you've already determined, Web browsers don't normally render newline characters \n as line breaks. If you're resistent to adding the line break element <br />, you can use the white-space CSS property with the value pre-line, which will:
Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
Be sure to check the property's compatibility tables before using.
<div style="white-space: pre-line;">
Look
at
these line breaks!
</div>
Here's a JSFiddle example.
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.
I am trying to put some text along with quotes in a DIV like this
"All is well that ends well"
now the text is dynamically generated and I am using javascript font replacement plugin (CUFON) for quotes around the text, sometime ending quote drops down to next line because of word wrapping like this
"All is well that ends well
"
How can I prevent that? I couldn't find a way to prevent it. code looks something like that
$("#q1").html('<span class="blue_quotes">“ </span>');
$("#ct1").html($.trim(commentText)+'<span class="blue_quotes">” </span>');
I added span tags for quotes because I need different font and color for quotes
You can use escape sequence \ for such cases ..
But I prefer using unicodes for such cases..
If you want to use the first approach try this
$("#q1").html('<span class="blue_quotes"> \“ </span>');
Check FIDDLE
I have a set of html text boxes that take input and when the user clicks an 'add' button uses javascript to take the text input and format a string that is put in an HTML select box. The first of these boxes is supposed to contain a 2 character number but can also accept a blank. The formatted strings would look like this:
01-ABC-O
02-DEF-I
However I need a way to display the blank numbers that lines up with the other elements
-GHI-O
This type of entry will show up fine when the javascript adds the option, but when the page is reloaded and the select is repopulated with the values (I'm using Java, jsp, and struts 1.1 if that helps) it gets the same values(spaces preserved) but the whitespace is no longer shown in the select control (I've looked at the page source, and it looks identical to when the javascript adds the option). I have tried substituting the spaces for but this just prints the string " " instead of the space. I've also tried using "pre" html blocks and the css white-space property and neither have worked.
Let me know if any further clarification is needed.
You need to replace the spaces with and it should work - note the closing semi-colon (which is missing from your example in the question)! When you do it through Javascript, most (all?) browsers will automatically render the spaces, but when the spaces are there when the page is loaded all (sometimes all but one) of them will be ignored.
You should also apply a font-family: CSS attribute to the select that specifies mono-spaced font(s) in order to ensure everything lines up properly.
When creating the select option with javascript, to preserve white-space, use "\xa0" - it is a NO-BREAK SPACE char.
You can use the pre css style on the area that you are outputting the value to.
<style type="text/css">
#element {
white-space: pre;
}
</style>
<div id="element">
stuff goes here
</div>
This will preserve all whitespace in the div element (other element types will also work) and then you don't need to worry about using the non breaking space.
Are you going to add it via scripting, you need to use Escape Codes for Space "% A0" which you then decode with unescape ()
logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");
logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");
Since unescape is deprecated, you may want to use decodeURI:
logTypeList[i] = new Option(decodeURI(" kent Agent".replace(/ /g, "%C2%A0")), "theValue");
More info at http://www.javascripter.net/faq/mathsymbols.htm
You can use the Unicode Character 'SPACE' (U+0020) instead of ("\u0020")
i want to find a text named "footer= XXX" in a text document and replace the XXX with my own value. The problem here is that this footer value repeats in lot of areas in the document with different values assigned to it. Any idea of how to do it?
str.replace(/footer=(.*?)\s/g, 'footer=whatever');
See it on jsFiddle.
You didn't mention what the end delimiter is, so I used white space. You may want to use a word boundary (\b).