I would like to add 'span' tag on the beginning and '/span' on the end of each line of text as it is presented in the website and change it dynamically when a div containing such text is resized. The problem is that I don't know how to detect where the text is being wrapped - if I had such information it would be easy. So my question is: is there a way to determine where the text is wrapped using javascript?
I have found a javascript library which hyphenates the text in the site but I'm not sure how does it detect line wraps. The working example is here and it's source can be found here.
yes, this is like to Search For and Highlight Text.
using javascript you can learn it here:
Search For and Highlight Text
or here:
how-can-i-use-jquery-to-style-parts-of-all-instances-of-a-specific-word
just download/save the web page there and you can learn it.
Related
I'm working on Angular 4 and I have a feature in application is render a file text with pure text (not parse to any structure) to html. I'm able to search a part of content on the text. Now I have a solution as the following:
Solution 1:
I would like to analyze the text, all text are wrapped in div element, that div contains multiple paragraph elements <p> content which separated by newline (line-break) in the file. Then go search keyword and to find out a <p> contains keyword, styling CSS highlight for specific text within <p> element. But I have googled but still not found any sample for this.
Maybe you will ask me why don't you parse all contents in one element tag. I think that it's more complicated for css styling and scrolling to position occurring keyword.
Therefore, I need some helps to find out for this case. Thank you in advance.
UPDATE:
Whether should I need to use find feature built-in of browser?
I'm trying to have a textarea input field just like when you post a new StackOverflow question. You can have line spaces, you can bold text, you can insert link etc.
However, when you push some kind of button, all of that gets translated into a long HTML string (e.g., spaces become <p> or <br>, bold becomes <strong>, link becomes <a>). Is there a way to do this with some kind of JS plug in?
What you describe is a What You See Is What You Get (WYSIWYG) editor.
Google "WYSIWYG editor library"
Examples:
https://prosemirror.net/
https://www.tinymce.com/
This question has been answered here Rendering HTML inside textarea
What you need is WYSIWYG (What you see is what you get) editor.
There are a lot of them.
You can check out these:
Ckeditor The best web editor for everyone
TinyMCE Full featured web editing
They are very easy to use.
If I have understood what you are asking, you will need to learn regular expressions. Everything is the context is based on text replacement.
Example: because textarea does not display hyperlinks, buttons, i can do somethings like in stackoverflow.
For hyperlink, i can write something link [# http://facebook.com] or [link]http://facebook.com [link];
later, I extract the http://facebook.com and wrap it between <a></a> elements.
What everybody above said is true, you want to be looking at a WISYWG editor.
If by chance you are using Bootstrap, you may want to look at Summernote.
I have no affiliation with them, but I used it for one of my projects and was very pleased.
am having one task in epub (i.e) quiz .so the problem what iam phasing is,once the user read the question means he enter his answer in text box. so the problem is text box does not show the key pad for typing the answer.is any some other solution for this problem using java script?.is it possible
you can add javascript or a javascript plugin like jquery but there are some changes you will have to make to your code. I added a flex slider with just a few changes. First take out the leading xml call in the html file then use a cdata wrap for your script. If you go to my youtube channel I did a couple of videos on it about a year ago. http://www.youtube.com/watch?v=geAnFKbW9wI
Hope this helps.
You can use like below, am using this for interactive FL books.
<div contenteditable="true">_</div>
and also you can refer this for contenteditable change events.
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.
Is there any JS function that can change the color of certain text in a textarea?
For example, blar blar {blar} blar, {blar}, including { }, will be in blue. Other words will be in blank. In other words, all I need is a function that can change color of all text in { }.
I've done some studies and it seems that most people say it can't be done. But I'm seeing rich text editors or those wysiwyg editors having the ability to bold or underline words. There must be a way to do it.
Any suggestion is welcome.
No one mentioned contentEditable?
Just make a contentEditable div and use javascript to style it.
I reccommend you to look into the Dojo Toolkit's.
It has a Editor widget.
Other resources:
Some contentEditable problems in IE.
How to use contentEditable with jQuery or without it.
wysiwig-editors are using iframes instead of textareas. Textareas are very little customizable, since what you're after is changing part of the content. You can't add tags inside a textarea, which makes it impossible to only change part of the text.
If you look at the editor here in SO, you write normal text inside a textarea, and it is then transformed in the box below it, so you'll see the asterix inside the textbox, but in the box below, it'll transform special characters by regexing them with tags.
If you're using firebug, you can start writing inside the editor, while looking at the HTML in the preview-box.
you can't use a textarea to do that, per se.
But, javascript is your friend. Perhaps you should take a look at the code of a few rich text editors.
You could start with lwrte, since it says its "lightweight". Also, its written in jquery so it will be pretty easy to undertand. (and I'm a jquery fanboy).
Hope that helps,
jrh
I Think You will need to use execCommand method of javascript it controls many thing such this stuff of changing specifc textcolor
Regards
But some Jquery WYSIWYG editors do this ! How is that possible ? See this editor lwrte