Hightlight substring of "text" in HTML SELECT OPTION using javascript - javascript

I have a html-select which gets populated at run time.
i.e. when i type something in html input textbox, i display the substring based results in below attached html-dropdown-listbox.
Now i want to highlight only that substring of an item in html dropdown listbox which matches with the string in html-input textbox.
e.g.
if i type "ample" in html-input textbox then it should highlight "ample"
<OPTION value=723.1> S*ample* Text </OPTION>
i have already tried to modify the innerHTML property of that html-dropdown-listbox.
I want to do it using javascript.

You cannot style the inside elements of a SELECT. It's rendered by the OS, not HTML.

Try this approach
<p id="textindrop">this is the text in the dropbox</p>
tohighlight
<script type="text/javascript">
function highlightsubstring(el) {
var theText = document.getElementById(el).innerHTML;
theText = theText.replace(/(web)/gi, "<b>$1</b>");
document.getElementById(el).innerHTML = theText;
}
</script>
Try this and see this helps you, put some logic of yours also. you can also use regular expressions for this. read about regular expression in javascript

There is a CSS3 way:
Use font-family: monospace to get equal width characters.
Use background-image to get an adjustable background.
Use background-position to set the starting position of the highlighting background in ch.
Use background-size to set the length of the highlighting background in ch.
Restrictions:
Only works in Gecko-based browsers.
Highlighting in the select too requires additional adjusting. (I did it with text-indent, finding better solution is encouraged.)
I put together a simple demo on jsFiddle.

Related

js ckeditor show text color

In the ckeditor, firstly I want to use set data that the text color is black, and than I want to set text color to be red.
var editor = CKEDITOR.replace("editor");
editor.setData ('msg');
editor.addCss({body:{color: #FF0F0D;});
But it does not work, what should I do?
Like your other question, this is very basic JavaScript and I suggest you run through some tutorials just to get you up to speed. In the CKEditor manual entry for the addCsss function, you can see that the argument for addCss is a string of CSS, but you are trying to give it something else as an argument. In JavaScript, strings are delimited with the " or ' charter.
Try editor.addCss("body{color:#FF0F0D;}");. Note that I encosed your CSS rule between quotes and fixed it to be valid CSS.
Manual is at http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCss

Make my textbox understand html img tag

When inserting a new emoji inside my textbox i want to be displayed as the emoji image and not the emoji symbol how can i do that like instead of ( ':)'--> put the image represent it inside my textbox )
One way: Instead of a text box, use a <div contenteditable="true"></div>. As the user types, change occurrences of the smiley for the image. When the form is submitted, your javascript needs to translate the contents of that div back into plain text and put it into a field for submission.
If you want to use images, then it would require you to change your HTML significantly. You would need to make use of the Content Editable functionality on something like a <span>, rather than a regular input box. You'd then need JavaScript code to monitor keypress events and whenever it sees a :) (or whatever), it replaces the code with the appropriate <img>.
A quick-and-dirty solution that sticks with your text box, however, would be to use the same approach, but use the Unicode emoji characters (rather than images). This will only work on platforms with the appropriate font glyphs -- although the common smilies are more widely supported -- but it gives you the idea:
HTML:
<input class="emojify" type="text" />
JavaScript (using jQuery, to make everyone's life easier):
$(document).ready(function() {
// Map plaintext smilies to Unicode equivalents
var emoji = {
':)': '\u263a',
':(': '\u2639'
},
// Function to escape regular expressions
reEscape = function(s) {
return s.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
};
$('input.emojify').keyup(function() {
var text = $(this).val();
// See if any of our emoji exist in the text and replace with Unicode
$.each(emoji, function(plaintext, unicode) {
text = text.replace(new RegExp(reEscape(plaintext), 'g'), unicode);
});
// Replace text with new values
$(this).val(text);
});
});
Here's a working demo on jsFiddle. Note that the caret position will be reset every time the keyup event is triggered. I'm sure you can work around that somehow, but this code suffices to illustrate the process.

Adding space in a string jquery

I wanto to insert a space at the start of my string
Example:
MySite
MySite (I want this)
I have tried in this mode but nothing
txt=" "+v.text();
Can someone help me? Thanks a lot
Try :
txt=" "+v.text();
The other good solution would be to use div with some style set on it.
<div style='margin-left:15px' id='main_text'></div>
You could use jQuery to place txt in the div.
txt= v.text();
$('#main_text').html(txt);
A solution is to fill the spaces with entities, but if you have to achieve this effect just for styling/visualization purpose, then wrap that line in a proper tag and use some CSS instead (e.g. text-indent property)
if you have to indent text inside a select (as I guess reading your previous answer) you may want to wrap your options inside an optgroup element (and give it some padding)
var str2 = " Here goes your string with spaces";
There are 2 solutions below :-
1. txt="<pre> </pre>"+v.text();
2. txt="<span style='margin-left:15px'></span>"+v.text();

JQuery or Javascript code to change the font of the last character in html text

I know it sounds odd, but I'd like to create an html class that will change the font of the last character in the tagged text.
while css lets you change the fontsize, color of the first character of some strings, there is sadly nothing to change the font of the last character.
Is it best to use the charAt(length-1) in JS or is there some way in JQuery to alter the last character of the selected class?
You'll have to fetch, change, and then reput the html content of your texts.
I made a fiddle to illustrate it :
http://jsfiddle.net/dystroy/3maG5/
Be aware that there are risks : without greater analysis you may have problems if your paragraphs (or other texts) end with an element.
EDIT : I just see that eyurdakul made a few seconds before me a very similar answer. I think he's correct too. I let this answer as a complementary one to give a testable example. Of course, if one answer should be accepted, it's probably eyurdakul's one, he was faster :)
give them some class for the selector, .last for example;
$(".last").each(function(){
var inner = $(this).html();
var firstPart = inner.substring(0, (inner.length-1));
var secondPart = inner.substring((inner.length-1), inner.length);
$(this).html(firstPart);
$("<span/>").css("font", "Arial").html(secondPart).appendTo($(this));
});

Preserving white space in an HTML select option

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 "&nbsp" 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")

Categories