I'd like to take the selected text on screen (text highlighted with the mouse) and when a button is pushed wrap that text in a tag. I'd like to use jquery but if it can be done in another framework that would be fine too.
I haven't been able to figure out how to do this yet, so any thoughts are appreciated. Also I know you can run into issues if the text goes across several elements so for now case just assume the text highlighted is all contained in a tag.
Thanks!
Highlighting the selected text doesn't necessarily require you to wrap it. In fact, trying to wrap it is difficult if the range of the selection spans multiple tags (i.e. doesn't surround nicely closed tags).
Here's an answer that highlights the current selection without wrapping it: Javascript Highlight Selected Range Button.
He uses execCommand to let the browser highlight the current document selection for you. Pretty sweet.
Here is a post on working with selected text. The getSelection() method can be used to get the selected text, then you should be able to replace that text with text wrapped in a tag.
Related
I'm working on a Chrome Extension which I want to replace certain characters in a specific text field on one specific website. It is basically to change emoticon text (like ":-D") into the proper emoji's, such as "😄". I tried a few things I found online (I'm not very good with JS):
- A MutationObserver and then look for all text fields with a certain name, then replace all emoticons by hand. Didn't really do the job properly and also kept firing up the print window for some reason
- Event listener added with event 'keyup' but it doesn't seem to fire up.
Hope you guys know a good solution!
This question does not give anywhere near enough information to answer. Are you using the program for input fields on the website? What solutions have you tried? Where is the code? Essentially, you are asking us to write the entire program for you. This forum is meant for programming help, NOT doing the entire program for you. You need to fix the question to be more specific.
If you just want to replace text elements, you would have to use the select elements by tag name to select all text elements on the page and then search through each of these for the sets of emoticons. Once finding these, you would have to change the elements inner html to fit the emoticon from UTF-8.
I am trying to create a highlighter in javascript that captures what text is selected and also highlights (changes text color and background). I am able to get to the point where it captures using mouseup/down (implemented using http://www.codetoad.com/javascript_get_selected_text.asp) but if I combine changing the colors (from http://www.nsftools.com/misc/SearchAndHighlight.htm), its not working and pages become unresponsive. I think since I am calling the 2nd script to change the colors from within the body tag, its not working properly. I have googled but am not able to find any solution that mixes both of the above 2 solutions.
what makes this slightly complicated is that I dont want the actions to be attached to a button, i.e. as soon as a text is selected, it should be saved in a variable and colored instantly, i.e. as soon as the mouse is lifted. I tried using CSS but it only works for the 1st highlight, i.e. as soon as you select another text, the 1st highlight is removed and the new text is highlighted....
Any help is greatly appreciated.
You could use a combination of the following two answers to do this:
https://stackoverflow.com/a/5887719/96100
https://stackoverflow.com/a/8713757/96100
Here's a demo: http://jsfiddle.net/E2bU6/
How would you get the currently selected text within a textarea (and modify it)?
I've seen the select event that can be listened for, but I was wondering if there was a way to just get the currently selected text.
Also, what technique do you need to use in order to be able to modify that specific section of text within the textarea? I assume there's some way of finding out what the position of the selection is within the contents of the textarea as a whole?
What I want to be able to do is take the selection and modify it, or wrap it in certain tags etc., like you are able to do in the stackexchange text editor.
If you only have to support the latest browsers, you can use the selectionStart and selectionEnd properties which expose the character positions of the text selected in the textarea. You can't modify just the selected text but having updated the value you can use setSelectionRange to reselect the text.
I've posted what I consider the definitive function to do this in all browsers (including IE < 9) on Stack Overflow many times. Here's one example:
IE's document.selection.createRange doesn't include leading or trailing blank lines
I'd also recommend my jQuery plug-in for this, which includes this function and others to insert, delete, surround or replace the selected text, which sounds like exactly what you want. It's also the only jQuery plug-in for textarea selections I'm aware of that works correctly with line breaks in IE < 9.
From this page
http://www.netadmintools.com/art466.html
function display(txtarea) {
var sl = (txtarea.value)
.substring(txtarea.selectionStart, txtarea.selectionEnd);
}
<body onload="thisForm=document.frmKey;">
jquery field selection plugin..
Download Here examples on site.
The ::selection selector might work as well.
http://www.w3schools.com/cssref/sel_selection.asp
I don't know if this is possible in Javascript but I am trying to achieve this. I don't know the terminology so I thought I would post it on here with pseudo code to help you understand what I want to implement.
Pseudo Code:
User Selects Option from pull down.
If selection matches criteria
Add text boxes to the form
Else if selection is something else
Add invisible text box with NULL value
I would like to code it myself but if you could post some reference material or links as I have not done much with Javascript.
Thanks
For your first and second entries, google for 'html select onchange'.
You'll want to check out document.createElement for "Add text boxes to the form"
To make your text box invisible, check out the CSS display property, setting it to none or block (or inline)
I've tried to keep this answer very short without code samples because it sounds like you want to do it yourself. Add a comment to my answer if you want more of an example.
EDIT
Also of note, along with document.createElement, you will want to look at appendChild to add the created element to an HTML element, most likely some FORM element in your page.
I've got a GWT application that displays largely text spans. I'd like to programatically select all of the text currently in the browser window (similar to pressing from the browser menu).
Can anybody give me a pointer to this?
cheers,
Ian
The select all function is not available for the entire DOM, however there is a selectAll message for TextBoxBase, so what is commonly used for large quantities of text where you automatically want to do a select all is to put the text inside a TextArea. If you don't like the look you can remove the borders from the text area and set it to read-only so that it would appear as just plain text.