I'm trying to highlight vowels for a simple reading aid website.
I have some HTML and want to highlight vowels, but there's also some HTML that I don't want to mess with. Basically only just <mark data-trigger="">other word</mark>
To clarify.
I have this:
Hello, this is a <mark data-trigger="">word</mark> that is in the text. I
want to get all vowels and wrap it in spans, but avoid messing with the other
html.
I want this:
H<span>e</span>ll<span>o</span>, th<span>i</span>s <span>i</span>s a <mark data-trigger="">word</mark> th<span>a</span>t...
I know this replaces all vowels > replace(/(a|e|i|o|u)/ig, "<span class='vowel'>$1</span>")
It would be enough to add "don't mess with anything inside MARK tags"
Can I achieve this using RegExp?
I can use external libraries, jQuery or whatever.
This should capture all vowels not included in the html tags and not inside of the tags as well.
/(a|e|i|o|u)|(?:<.*?>.*<\/.*?>)/g
If you did want to capture the text inside the html tags it would be this.
/(a|e|i|o|u)|(?:<.*?>)/g
Related
I want to detect and style a special letter .
for example something like this
:
body["p"] /
body["2"]
how can I do this?
thanks
You could do this on a node-by-node basis with a fairly simple replace, but it wouldn't scale very well.
Given the markup:
<p>Peter Rabbit ate all of Potter's pickling cukes.</p>
If you wanted to add a style to all of the letters p in this text, you could select the paragraph node and add spans around any p (assuming a single paragraph):
var graf = document.getElementsByTagName('p')[0];
graf.innerHTML = graf.innerText.replace(/(p)/gi,'<span class="fancy">$1</span>');
That said, this would only work on plain text nodes; if you had, for example, a span tag already in the p tag, it'd get mucked up by the replace.
You cannot with CSS. The only non-element (css-created) pseudo-elements are ::first-line and ::first-letter.
However, you could search with JS through the DOM and create tags around the letters to be highlighted. Check highlight words in html using regex & javascript - almost there for how to do that.
I need to replace all periods in a user submitted paragraph of text that will most likely be copy and pasted from a microsoft word document so the text will have formatting on it.
For example, text pasted in from word looks like this:
<p class="MsoNormal" style="margin-bottom: 5.75pt; text-indent: 0.5in;"><span style="font-size:12.0pt;font-family: etc...
I need to edit all of the periods not within these tags and put span tags around them, so I can't just grab the html and do .replace.
:(
Use this answer to find text nodes, then do the replace on them.
If you have it as a string, convert into document fragment first.
I want to replace (remove) html tags outside the [code] bbcode using javascript. for example:
<script>these</script> [code]<script>alert</script>[/code]<script>that</script>
should become
these [code]<script>alert</script>[/code]that
how use RegEx to replace/remove tags outside [code]?
Replace this /(\[code\][\s\S]*?\[\/code\])|<[\s\S]*?>/g to $1:
your_string.replace(/(\[code\][\s\S]*?\[\/code\])|<[\s\S]*?>/g, '$1');
It'll find all [code] tags first, save them, and after that it will find the remaining html tags (which will not be in the [code] tags).
ok I find a solution:
replace(/<(?=[^\[]*\[\/code\])/gi,"&_lt_;");
replace(/>(?=[^\[]*\[\/code\])/gi,"&_gt_;");
DO OTHER REPLACEMENT/CUSTOMIZATION HERE
replace(/&_lt_;/gi,"<");
replace(/&_gt_;/gi,">");
that it! :)
I'm trying to get the first letter in a paragraph and wrap it with a <span> tag. Notice I said letter and not character, as I'm dealing with messy markup that often has blank spaces.
Existing markup (which I can't edit):
<p> Actual text starts after a few blank spaces.</p>
Desired result:
<p> <span class="big-cap">A</span>ctual text starts after a few blank spaces.</p>
How do I ignore anything but /[a-zA-Z]/ ? Any help would be greatly appreciated.
$('p').html(function (i, html)
{
return html.replace(/^[^a-zA-Z]*([a-zA-Z])/g, '<span class="big-cap">$1</span>');
});
Demo: http://jsfiddle.net/mattball/t3DNY/
I would vote against using JS for this task. It'll make your page slower and also it's a bad practice to use JS for presentation purposes.
Instead I can suggest using :first-letter pseudo-class to assign additional styles to the first letter in paragraph. Here is the demo: http://jsfiddle.net/e4XY2/. It should work in all modern browsers except IE7.
Matt Ball's solution is good but if you paragraph has and image or markup or quotes the regex will not just fail but break the html
for instance
<p><strong>Important</strong></p>
or
<p>"Important"</p>
You can avoid breaking the html in these cases by adding "'< to the exuded initial characters. Though in this case there will be no span wrapped on the first character.
return html.replace(/^[^a-zA-Z'"<]*([a-zA-Z])/g, '<span class="big-cap">$1</span>');
I think Optimally you may wish to wrap the first character after a ' or "
I would however consider it best to not wrap the character if it was already in markup, but that probably requires a second replace trial.
I do not seem to have permission to reply to an answer so forgive me for doing it like this. The answer given by Matt Ball will not work if the P contains another element as first child. Go to the fiddle and add a IMG (very common) as first child of the P and the I from Img will turn into a drop cap.
If you use the x parameter (not sure if it's supported in jQuery), you can have the script ignore whitespace in the pattern. Then use something like this:
/^([a-zA-Z]).*$/
You know what format your first character should be, and it should grab only that character into a group. If you could have other characters other than whitespace before your first letter, maybe something like this:
/.*?([a-zA-Z]).*/
Conditionally catch other characters first, and then capture the first letter into a group, which you could then wrap around a span tag.
I have the following HTML as a string in my JavaScript function:
<p>one</p> <p align='center'>two</p>
I want to extract this string:
"onetwo" (without quotes obviously)
Can you please suggest some pure JavaScript code (jQuery is also OK...) to get tags' content?
Using jQuery you don't need a complex regex, you can easily parse the HTML and use the DOM:
var s = "<p>one</p> <p align='center'>two</p>";
var wrapper = $('<div />').html(s);
var text = wrapper.text();
In this case $(s).text() would have also worked, but it will fail if you have free text on the first level (e.g. <p>1</p>2), so I usually avoid it.
Note that the result here is "one two" (not "onetwo"), because you have a space between the <p> tags.
If that's a problem, you can use wrapper.children().text() or wrapper.find('p').text(), for example, according to your exact needs.
Working example: http://jsbin.com/osidi3
I made the following Regex to grab content from XML tags.
This will only work with a tag that has content and is followed by a closing tag. Will not get contents of tags that contain other tags.
The tag name is in capture group 1 and the tag content is in capture group 2. This will work to get all content including <, >, ", ' and & inside of tag content.
<([^\s>]+)\s?[^>]*>(.*)(?:<\/\1)>