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.
Related
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
I know there are other questions on editable divs, but I couldn't find one specific to the Markdown-related issue I have.
User will be typing inside a ContentEditable div. And he may choose to do any number of Markdown-related things like code blocks, headers, and whatever.
I am having issues extracting the source properly and storing it into my database to be displayed again later by a standard Markdown parser. I have tried two ways:
$('.content').text()
In this method, the problem is that all the line breaks are stripped out and of course that is not okay.
$('.content').html()
In this method, I can get the line breaks working fine by using regex to replace <br\> with \n before inserting into database. But the browser also wraps things like ## Heading Here with divs, like this: <div>## Heading Here</div>. This is problematic for me because when I go to display this afterwards, I don't get the proper Markdown formatting.
What's the best (most simple and reliable) way to solve this problem as of 2015?
EDIT: Found a potential solution here: http://www.davidtong.me/innerhtml-innertext-textcontent-html-and-text/
if you check the documentation of jquery's .text() method,
The result of the .text() method is a string containing the combined text of all matched elements. (Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.)
so getting whitespaces is not guaranteed in all browsers.
try using the innerText property of the element.
document.getElementsByClassName('content')[0].innerText
this returns the text with all white spacing intact. But this is not cross browser compatible. It works in IE and Chrome, but not in Firefox.
the innerText equivalent for Firefox is textContent (link), but that strips out the whitespaces.
This is what I've been able to come up with using that link I posted above in my edit. It's in Coffeescript.
div = $('.content')[0]
if div.innerText
text = div.innerText
else
escapedText = div.innerHTML
.replace(/(?:\r\<br\>|\r|\<br\>)/g, '\n')
.replace(/(\<([^\>]+)\>)/gi, "")
text = _.unescape(escapedText)
Basically, I'm checking whether or not innerText works, and if it doesn't then we do this other thing where we:
Take the HTML, which has escaped text.
Replace all the <br> tags with line breaks.
Strip out any tags (escaped ones won't be stripped, i.e. the stuff the user types).
Unescape the escaped text.
I've been trying to breakdown how WYSIWYG editors work, but am having problems figuring it out (and do not need even 5% of that versatility).
My own problem is simple.
Insides a contentEditable div, I have a bunch of text. I want to color code any text that matches a simple pattern. So I may have this text:
"this is is a text we [can ignore] this earlier one, but anything that [ref=xxxxxx|aaa|bnbb] that fits the ref has to be color coded."
I want any mention that follows the pattern of [ref=<whatever>] made slightly smaller/colored.
Any idea on how to do that?
One way is using the fabulous http://alexgorbatchev.com/SyntaxHighlighter/ plugin and writing a custom brush for your syntax, which shouldn't be too difficult since your syntax coloring requirements are rather simple.
If you add a keyup event listener to your contenteditable, you can perform your regex replacements there to add $1 in the contenteditable's innerHTML.
Doing so will reset the caret position, but you can preserve it using Rangy.
function highlight(){
var selection = rangy.saveSelection();
contenteditable.innerHTML = contenteditable.innerHTML.replace(/(\[ref=[^\]]*\])([^<])/g, '<span class="ref">$1</span>$2');
rangy.restoreSelection(selection);
}
The regex may not be perfect, but if not, it should get you started.
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 a long string, and a list of other strings, which I need to mark in the long string.
Say we have abcdefghijk and the strings I need to mark are ghi and abc.
What is the simplest way to do it in Javascript and CSS? I thought about using the exec() method that will return the starting index of the string in the long string.
Then, I'd have the starting index and the size of the string. So, I could find it in the long string. How could I highlight it? Maybe using CSS?
You can try this jQuery plugin. It's really straightforward...
How to use it?
1 - Download the plugin
jquery.highlight-3.js (2 KB) and reference it in your page just after jQuery.
2 - Style the highlight class
Create an entry in your CSS sheet:
.highlight { background-color: yellow }
3 - Highlight term/phrase
Call the highlight function with the text to highlight. To highlight all occurrences of “ghi” (case insensitive) that are within the form element, use the following code:
$('form').highlight('ghi');
4 - Remove highlighting
The highlight can be removed from any element with the removeHighlight function. In this example, all highlights under the element with the ID highlight-plugin are removed.
$('#highlight-plugin').removeHighlight();
Well if you know the index of the start of the string and the length you could just simply put span tags around it. So your HTML would look like:
<span class="highlight">abc</span>def<span class="highlight">ghi</span>jk
And then you'd style the span in your CSS:
.highlight
{
background-color:yellow;
}