How is it possible to add style (colors) to text in an html document in a letter by letter basis (by numbers and any symbol as well), to each letter a defined color is applied.
Think you have grapheme-color synesthesia, in this case I have, and want to make a text editor with your colors applied to glyphs. Although there are ready programs I want to enjoy doing one myself and practice my JavaScript skills. Later I am planning a reader also.
One way is to wrap every letter in an html element in another element, say a span and apply style by class name being related to the wrapped letters name. I will use same idea also in a React Native app.
Is there any other more efficient or more proper way to achieve this?
Basic regular expression with replace to add spans. You can replace the string with a function so you can do something more dynamic to determine the color.
var ps = document.querySelectorAll("p");
[].forEach.call(ps, function (elem) {
elem.innerHTML = elem.innerHTML.replace(/(\S)/g, "<span>$1</span>");
});
span {
display: inline-block;
border: 1px solid black;
width: 20px; text-align: center;
}
<p>Mary had a slice of bacon. It cost $0.75 and tasted great.</p>
<p>Bill had no bacon. He was sad!</p>
Other than doing the looping and replacing, I do not think there is another way of doing it.
Below is the reference link,
Change this span tag in the referenced example,
ie. instead background give color in style tag
<span style="color:'+bgColor+'">'+ text.charAt(i) +'</span>
and
Change the css background:white
Reference link
Related
The code below correctly changes the text inside of an HTML element by rewriting the entire line of text. This is accomplished using textContent but innerHTML can also do this.
document.querySelectorAll(".box")[0].textContent = 'The number of dollars in my bank account is $1';
body {
margin: 0;
padding: 0;
}
.box {
padding: 10px;
font-size: 2rem;
color: white;
font-family: sans-serif;
background-color: blue;
}
<div class="box">The number of dollars in my bank account is ?</div>
However is there a way to change just a portion of the text without having to rewrite the entire line? This probably isn't correct but something like .innerHTML[5, 10] that would change just those specifically targeted characters.
Put simply when Javascript is used to change text or tags inside of an element does it always rewrite the entire section? This might not be visible to the user but is that what always happens behind the scene? Thanks so much!
Far better approach would be to change your HTML to something like
<div class="box">The number of dollars in my bank account is <span id='amount'></span>.</div>
Then you can easily change just the amount with js:
document.getElementById('amount').innerHTML = '5$';
So your website displays:
The number of dollars in my bank account is 5$.
If you want to stick to your approach, only way to do that would be to save the entire content into a string and then perform some search on it, either by substring, filter or regex. Then you would replace the elements you want and put the string back in the HTML.
Use a nested span tag to display the dollar amount. Then you only have to update the span's text. And when you need the entire sentence you can just access the div.box 's textContent. It returns the textContent of all nested elements concatenated.
I would like to split up text by comma - i.e. keywords are as the following:
keyword1, keyword2, keyword3, keyword4
How can I have a the black style element for each and every keyword that is separated by a comma. Is there an easy way to do this? The text is always dynamic, so I never know exactly what those keywords will be and how many. So each keyword should have a box elements around it.
<span class="keyword-option-black">keyword1, keyword2, keyword3, keyword4</span>
.keyword-option-black {
color:white;
background-size:contain;
margin:10px;
padding:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background:black;
}
CSS is unable to select text.
In order to highlight the keywords on a page, you need to use programming languages such as JavaScript (for client-side) or PHP (or whatever else for server-side) to wrap the keywords by a wrapper element which has a special CSS style to distinguish the keys.
Here, I implemented the above approach by using jQuery (just to demonstrate):
Working Fiddle
JS part:
// Insert the keywords here,
// you can also get the keys automatically from the DOM if needed
var keywords = ['Google', 'Facebook', 'Social'];
$.each(keywords, function(index, key) {
var $content = $('#content'),
text = $content.html();
$content.html(
text.replace(
new RegExp("("+ key +")", 'ig'), "<span class='highlight'>$1</span>"
)
);
});
And here is the highlight class:
.highlight {
color: white;
background-size: contain;
margin:10px;
padding:5px;
border-radius: 5px;
background: black;
}
HTML and CSS are static. Since you don't know how many keywords are gonna be there, you need something dynamic. Depending on implementation, you can use JavaScript or any Back-end language you are using.
Basically, you want to add a span tag around each keyword and style that span (span in one with class keyword-option-black). So, when you enter keywords to HTML use <span>keywordX</span> in loop that adds elements or, alternatively, add those tags when document loads using JavaScript.
Hope this helps.
Using Django, I did it the following way.
Create a simple CSS class to perform the highlighting.
Create a custom tag that splits up data in template view into <span class="keyword">A</span><span class="keyword">B</span>. It takes the original view output and parses this into a format that already has the spans included.
This may not be possible, but I'd like to confirm.
You can globally change the selected text highlight color of the page with
::selection {
background: #cccccc;
}
::-moz-selection {
background: #cccccc;
}
but is it possible to change the the highlighted color for an individual element in JavaScript?
For example, if s is an element's style attribute, you can change the text and background colors using
s.color = s.backgroundColor = "#cccccc";
is there a style to change the element's highlight color?
This must be in old-fashioned JavaScript, no JQuery.
EDIT:
Also, because of performance, I need to change this to the element itself. CSS class swapping performs very poorly. The use case is that every word in a page I do not own will become it's own element. On an average page, adding a CSS class through script is taking 20-30 seconds whereas changing inline styles can be done in under 1.
Pseudo-elements and pseudo-classes aren't in the DOM, but you can use classes to achieve your result.
So add a rule like
.selectionclass::-moz-selection {
background: #cccccc;
}
to your stylesheet and add the class name selectionclass to your element.
i have a problem of hand cursor i m currently selecting the text and highlighting it but problem is i want a hand cursor on the highlighting text
here is the running code of the problem any suggestion
http://jsfiddle.net/8mdX4/135/
and i want to run it in the IE8
Add a CSS rule in your example:
span {
cursor: pointer;
}
This will enable the hand-cursor on the generated span element on the page. Preferrabally you'd add an extra class to the generated span so not all span elements get the hand cursor. then you can add that class to the css like:
span.highlight {
cursor: pointer;
}
That is not possible using execCommand() as it does not support it. An alternative would be wrap the selected text in <span> tag and set the css property for it but it becomes PITA if you have html tags into your text.
Nonetheless, this might help you:
Inserting string at position x of another string
use this
style="cursor:pointer"
I'm using sifr for the first time today. I have it up and running; however, I need some help. Rather than explain, I'll show you the code below:
<div id="pullquote">“Fantastic property, facilities and location. We
couldn’t have asked for more!” <em>Mr & Mrs. Smith</em></div>
So far, so good. I have then styled that in the same document in case flash/JavaScript is disabled. No problem.
sIFR.replace(journal, {
selector: 'div#pullquote',
wmode: 'transparent',
css: [
'.sIFR-root { text-align: center; color: #be7705; font-size: 30px; background-color:#fdefd4; }',
'em { font-style: normal; color: #1d5d69; font-size: 26px; }']
});
That's what is included in my JavaScript file. Am I correct in styling the element like this? I got slightly confused with the selector, then using a second selector within js-css. Once again, there is also sifr.css. What should be included in this document? Should I be styling the element here?
I suppose my question is: What should be included, and what styling should be done in sifr-config.js and what styling should be done in sifr.css?
Thank you :)
In the CSS for the HTML page (sifr.css) you can add a style to hide the elements that sIFR will replace before does so, and you can do some tuning of the text so the text size maps better to the Flash font.
The selector parameter for sIFR.replace() is used to select the elements you wish to replace by sIFR.
The css parameter contains the CSS used inside the Flash movie. At this point, all CSS selectors are relative to the element you replaced, so if you replace an h1#foo, then you select em rather than h1#foo em. This is the only place you can style the text inside the Flash movie, aside from font size, which, if not specified here, is derived from the font size of the replaced element.