Creating colorful text in JavaScript - javascript

I am trying to write a function that prints a certain text into a <div id="1"> tag.
The string should mark certain index values in different color.
What I have written now is to go to all the index values I have and add a <font color="color"> tag, and then I add it using div1.innerHTML = result;
Its a lot of work, and its very complicated. Is there another way that I can create a string
object like I've described without these HTML tags?
If I can do that then I would just use div1.appendChild(String);

I generally am loathe to recommend that anybody use a library that they don't already claim to use, but this is one of those times where the question almost directly asks for a library as an answer :-)
Check out Lettering.JS. It was designed to do exactly what you describe. It wraps your text content by letter or by word or by line (I think) in <span> tags, under your control. You then use CSS to style elements, or some more JavaScript to manipulate and style the elements it creates for you.

if what your looking for is a syntax coloring, you can try this jQuery plugin.
http://www.steamdev.com/snippet/

Related

I want to create my own html tag [duplicate]

This question already has answers here:
Is there a way to create your own html tag in HTML5?
(18 answers)
Closed 10 years ago.
I want to create my own html tag. I use it on more than one page.
<myTag>
text
</myTag>
Attribute could be added. A javascript function should be run. The function must run whenever the tag is used. Any idea?
For example:
<body>
<myTag id="" class="" newAttribute="value" --blah blah blah-- >text</myTag>
</body>
<script>
function myTagFunction(){
blah blah.....
}
<script>
My purpose is not to break the HTML standard. I just want to learn how to create a custom HTML tag.
Just use a normal HTML button that calls the JavaScript function. Creating your own HTML element would make your website non-compliant.
How do you want to tell browsers to treat your html tag in way defined by you? Browsers cannot interpret non-standard tags. HTML is a standard, so you can't use non-standard tags in that way.
I want to create my own html tag
You really don't.
HTML is a language that allows us to add meaning to text.
This is just some text.
<p>But this is a paragraph, because it has a <p> tag around it.</p>
<input type="submit" value="And this is a form submission button">
This lets computer programs (including traditional web browsers, screen readers for the visually impaired, mobile phones and search engines) interact usefully with HTML, because the tags indicate what each element is.
This only works because everyone in the world has agreed on the meaning of these tags (via the HTML spec).
What you should do is use whatever existing HTML tag best matches the control you have in mind. In the case of a "back button" (which, please note, every web browser in the world already provides), that might be a <button> tag, or perhaps a link (<a>). You could also have a look at the Accessible Rich Internet Applications (ARIA) spec to see if any of the control types there fit what you've got in mind.
I'm a bit confused about your explanation for wanting to make a custom HTML tag though:
Because, i want to use it on more than one page
Maybe you don't want to repeat the JavaScript function that should run when the button is clicked? If so, you can put the function into its own file and include it on the pages where you want to use it:
<script src="/myFunction.js"></script>
Then your button can use it like this (very simplified example):
<button onclick="myFunction();"></button>
You can read up more on this here: DOM event handlers.
Instead, use a <span> or <div> with a CSS class, then attach an event handler to it. JQuery makes this kind of thing easy:
$(".myCSSClass").on("click", backButton);
Thats not possible to create our own customized tags in html
better to give class name for unique identification ..like
<span id="" class="backButton" newAttribute="value" >BACK</span>
and use this class 'backButton' for your operations..
You could have an own namespace in the html header. But you have to set that on every page.
it looks similar to:
<html
xmlns = "http://www.w3.org/1999/xhtml"
xmlns:og = "http://ogp.me/ns#"
xmlns:fb="http://ogp.me/ns/fb#">
But you dont want that, because its a really heavy process.
You can technically leverage the XML Element Declaration, which is part of the core DTD spec for XML, but I don't know that HTML 5 plays well with base XML, versus XHTML.
<!DOCTYPE html[
<!ELEMENT backButton ANY >
]>
FYI, I have no idea if the above works, it's just how it would work if it did.
However, it's not worth it at all and as Eric has advised, it would be much more compliant and reliable to simply use a class attribute (which can be space delimited to allow more than one) or, if you are still feeling feisty, use the data- attribute, like:
<div data-button_type="back">[back]</div>
There is a way to create your own elements, but I am not sure if you can assign JS so easily.
First derive from an existing element
<element name="backButton" extends="button"> ... </element>
Then use it
<backButton> ... </backButton>
See here for more information.
Apart from that, the other guys are right! Your site would not be compliant to HTML-standards.

HTML Markup Generator from Form

I'm making a html template generator sort of like this. It's going to have specific style and markup so all it really has to do is take the inputs from the form and place them in the "template" and output as text for easy copy/paste. I was wondering if there is an easier way to make this, like using jQuery. Open to all suggestions.
jQuery has a selection of methods for dealing with the DOM that could come in useful for creating HTML markup from a form. It also has a few methods specific to forms themselves, if that suits your purposes.
Check out the API for Manipulation. There are a variety of methods you may find useful.
Since you are constructing HTML with form values, the .wrap() method could be quite valuable to surround content with the inputted tags, ids, and classes, which could be styled with a externally linked CSS file. See also the .wrapAll() and .wrapInner().
You may find the .html() method interesting as well for grabbing the contents of any element. It is somewhat the reverse of what you need but it could come in handy.

Placeholder notation for separate HTML files for creating small portions of web pages and replacing placeholders with data values

Currently I am using text like "rusername" "rpassword" or "rdate" and then replace using an appropriate string replace function, e.g.
htmlstring=htmlstring.replace(/rusername/g,object.username);
it is a confusing notation when the project size grows. for worlds like rreply rratio etc. when I use :username html editor gives errors that I wouldn't want to see, because the editor thinks I'll directly use the html rather than replacing it. what kind of notation should I use for text to be replaced? it should look legitimate for html designers, {username} is no good, is there a common format for it? What do you suggest?
There might be many valid ways, so please don't hesitate to answer in any way.
I would recommend against doing string replace at all, and instead use spans with ids. It will also be much faster.
<div>
Hello, <span id="username"><span>!
</div>
And then your script can look like:
document.getElementById("username").innerHTML = object.username;

JavaScript: make html text plain text

I've got a js-function which takes string as a parameter and get it displayed in a div element. Such string may contain html tags.
How do I force JS display inner text in div-elements as html-text with html-tags. And, also, what is an adequate way to filter particular tags, i.e. apply certain tags for styling and just print others.
You just need to replace & and < (and optionally > if you like, but you don't have to) with their respective entities, using String#replace (spec, MDC) for instance.
And, also, what is an adequate way to filter particular tags, i.e. apply certain tags for styling and just print others.
To put directly user inserted HTML code is dangerous for XSS. You should use some tool to sanitize HTML code (here on StackOverflow, for example, you can use some HTML tags).
As posted in this question here on SO you can use this client-side sanitizer: http://code.google.com/p/google-caja/source/browse/trunk/src/com/google/caja/plugin/html-sanitizer.js
On the other hand you may need to do this on the server-side, which one depends on your environment (ASP.NET? PHP?).

Replace selected text with jquery/javascript

I am trying to build a specialized WYSIWYG text editor in the browser, and have a very limited set of functionality, but the biggest part of that is wrapping certain text in span tags.
I can find many resources explaining standard stuff (execCommand and whatnot), but have looked and looked and can't find anything to do what I need.
Basically, it's as simple as it sounds: user selects some text, clicks a button or whatever, and the text gets replaced with some other text (the initial case is that same text wrapped in some HTML tags).
I can find ways to do this in a textarea, but I'm just in regular HTML land, with the content in question inside a div with contentEditable marked as true.
I have also found ways to replace all occurences of text, or the first occurence, but not a specific one. Most solutions I find fail when trying to replace anything but the first occurence.
I'm hoping jQuery can do this in some way.
Have you tried the jQuery wrapSelection plugin?
This is pretty similar to this question. It might help.

Categories

Resources