I want to highlight the hex code in the text while typing it.
I have a code that looks for a hex code among the already written text and highlights it.
$(".hwt-highlights").each(function(){
var hex = /#([a-zA-Z0-9]+)/g;
var spanhex = '<mark style="background-color: #$1">#$1</mark>';
this.innerHTML = this.innerHTML.replace(hex, spanhex);
});
But I added this code to the onkeyup event and everything started to work incorrectly.
enter image description here
Each time the button is pressed, the highlight is superimposed on each other. Does anyone know a way to highlight the hex code in the text while it is being printed?
The pseudo code piece of the problem goes like this:
Take the input of the field where you want the highlight code
Use some regular expression to know whether the text contains your keywords to be highlighed
Use spans with classes to highlight those specific matched words.
Here is some basic code to start on the lines of the implementation, not sure whether this is specifically in sync with your requirement or not:
// take this input from where ever you want to take
const input = document.querySelector("input");
input.addEventListener("input", function() {
const text = this.value;
const hexRegex = /#[0-9a-fA-F]{6}/g;
const hexCodes = text.match(hexRegex) || [];
hexCodes.forEach(hexCode => {
text = text.replace(hexCode, `<span style="background-color: ${hexCode}">${hexCode}</span>`);
});
this.innerHTML = text;
});
Related
I have been struggling for a long time looking for a range highlighter. If the user selects a particular text, that should be highlighted and in the same way if the use selects a range of text and click on remove highlight it should remove only the highlight from that selection. Please help me , i am stuck with this for a long time . Thanks.
You don't exactly need a plugin to do this, instead, you can get the element for where you the selected/highlighted text is, and then stored its content in a variable. Then you can set the elements .innerHTML back to the stored value. In the example below I have applied this to the entire body so it removed any selections made on the entire webpage.
See working example below:
const btn = _ => {
const elem = document.querySelector('body');
const txt = elem.innerHTML;
elem.textContent = '';
elem.innerHTML = txt;
}
<body>
<p id="txt">This is some text. This is some more text, this is even mooooore text, this is even mooooore text, this is even mooooore text, this is even mooooore text, this is even mooooore text! this is even mooooore text! this is even mooooore text!</p>
<button onclick="btn()">Deselect</button>
</body>
I have been trying to add some custom features in tinymce editor. A button to highlight a text and the highlighted text should further be replaced with a underscore. This means that the mark element with it content should be replace with something like this:
<p> This yet another moment of trial. We <mark>keep</mark>doing it until it becomes <mark>perfect</mark>.</p>
To this:
<p> This yet another moment of trial. We <b>_____</b>doing it untill it becomes <b>____</b>.</p>
I have been trying it with this function
function getContentFromEditor() {
var content = tinymce.activeEditor.getContent();
content = content.replace("<mark>", "<b>______</b>");
document.getElementById("content_display").innerHTML = content;
}
But it only change the start tag.
This is the regex you need:
/<mark>\[^<>\]*<\/mark>/g
So your code should be updated like this:
content = content.replace(/<mark>[^<>]*<\/mark>/g, "<b>______</b>");
Demo:
This is a sample Demo:
var text = '<p> This yet another moment of trial. We <mark>keep</mark>doing it until it becomes <mark>perfect</mark>.</p>';
text = text.replace(/<mark>[^<>]*<\/mark>/g,"<b>______</b>");
console.log(text);
After making content changes to the tinyMCE editor dynamically you have to call the save function to update it visually.
Depending on your version:
tinymce.triggerSave();
or
tinymce.activeEditor.save();
First, you need to find all the marked elements.
And then loop over all those marked elements and replace them with the target HTML you want the elements to be replaced with
var replaceWithStr = "<b>____</b>";
var markedElems = document.getElementsByTagName("mark");
var markedElemsArr = [].slice.call(markedElems);
markedElemsArr.forEach(function(elem){
//elem.innerText = replaceWithStr; // this will only replace text
//elem.innerHTML = replaceWithStr; // this will not remove the mark tag, so your underscore will still be highlighted
elem.outerHTML = replaceWithStr; // this will give the required result
})
<p> This yet another moment of trial. We <mark>keep</mark> doing it until it becomes <mark>perfect</mark>.</p>
You can try using regular expressions:
content = content.replace(/<mark>[a-zA-Z]*<\/mark>/g,"<b>______</b>");
I am sorry if this question has been asked millions of times but i really tried hard to find solution for my problem.
Well i am working on a typing-speed script using jquery and php. The script is working good for calculating wpm nwpm etc but the problem is when user types there is no indicator that at which word the user it (Not the char, the WORD, each saperated by a space ).
Let i make it more clear.
I have a div which contains given paragraph
<div id="paragraph">Some text to type. It will going to be a long set of words</div>
and a textarea to input.
All i want is just to highlight the word which is being typed by the user. Not the char. Like in above paragraph when user starts typing first word "Some" the same word position has to be highlighted and if user pressed space to write the second value that exact style should be given to that word.
So whenever the user hits space the highlight style should be applied to that word. if user hits Som than the highlight word should be "text" which is in that time being typed.
document.getElementById('paragraph').length gives no solution.
Thanks
Sorry for my bad english and something got confusing..
Hopefully this will help. It uses a simple string split behavior to highlight the current word that should be typed. You can change to regex if you have to support double spacing, but that should be trivial.
Working jsfiddle demo.
HTML
<div id="paragraph">Some text to type. It will going to be a long set of words</div>
<textarea id="typingarea" cols="50"></textarea>
Javascript
var paragraphArray = $("#paragraph").text().split(' ');
updateTypewriter();
$("#typingarea").on("keyup", function(){
updateTypewriter();
});
function updateTypewriter(){
var typingAreaArray = $("#typingarea").val().split(' ');
var newTypewriterHtml = "";
var typingAreaWordIndex = 0;
paragraphArray.forEach(function(word) {
if (newTypewriterHtml != ""){
newTypewriterHtml += " ";
}
if (typingAreaWordIndex+1 == typingAreaArray.length){
newTypewriterHtml += "<span style='background-color: red; font-weight: bold;'>" + word + "</span>";
} else {
newTypewriterHtml += word;
}
typingAreaWordIndex++;
});
$("#paragraph").html(newTypewriterHtml);
}
I was able to get the highlighted text out of a textarea by recording onselect and storing the beginning and end each time. Then, when I click a button, I build the substring myself. Isn't there a simpler way of simply querying the selection?
I was kind of expecting that there would be methods in html5 dom for all these things, something like:
textarea.getSelectedStart()
textarea.getSelectedEnd();
textArea.setSelected(start,end);
Also, is there a way of programmatically deselecting text in a textarea?
I am putting in code based on the first solution below. This sort of works, but has a weird problem:
<script language=javascript>
function replaceCLOZE(code, questionType) {
var v = code.value;
var s = code.selectionStart;
var e = code.selectionEnd;
var t = v.substr(s, e-s);
var rep = "{:" + questionType + ":="+t+"}";
code.value = v.substr(0,s) + rep + v.substr(e,v.length-e+1);
}
function shortAnswer(code) {
replaceCLOZE(code, "SA");
}
function shortAnswerCaseSensitive(code) {
replaceCLOZE(code, "SAC");
}
function multipleChoice(code) {
replaceCLOZE(code, "MC");
}
The text area does in fact have attributes code.selectionStart and code.selectionEnd. But the code above, which now works, sets the highlighted text on the screen to be the first word in the textarea. Mind you, the selectionStart is still correct, but what is actually highlighted in Firefox is wrong.
In Chrome it works fine. Maybe this is just a bug in firefox or is there something else which should be done to properly update the textarea visually?
Following is simple way to get selected text of textarea of html. Still not clear what you want as following method simply will give you selected text in alert.
<html><head>
<script>
function alertme(){
var textarea = document.getElementById("textArea");
var selection = (textarea.value).substring(textarea.selectionStart,textarea.selectionEnd);
alert (selection);
}
</script>
</head>
<body>
<p><textarea class="noscrollbars" id="textArea"></textarea></p>
<button onclick="alertme()">Click me</button>
</body></html>
When you select text, the button will alert you what you have selected. selectionStart gives you starting point and selectionEnd gives you end point, while substring needs three arguments string, starting point and ending point.
I would like to load a text into text area, when clicked in a map area.
When I click in the second area, I would like to add another (different) text
How can I make this happen?
http://jsfiddle.net/CQvKJ/
I don't know Mootools, so I did this in JS only without framework.
This may not be a good solution, but this is basically what you want to do, no matter how you append the text.
Sample
http://jsfiddle.net/CQvKJ/2/
Updated JS
function funzione1() {
// alert("add text : 1.");
var e = document.getElementById('my_text');
e.value += "1";
}
function funzione2() {
// alert("add text: 2");
var e = document.getElementById('my_text');
e.value += "2";
}
Identify the <textarea> by id.
Retrieve the element in the click handlers.
Set the element's value to the text you want to show up.
Forked fiddle.