0

im using javascript to Highlight OR bolden a selected text range, its working well, but how can i make it UNBOLD and UNHIGHLIGHTED if the button is clicked again and the selected range is bold or hightlighted

i cant use doc.execcommand or jquery because im using it in android webview, if i use doc.execcommand the command take like 1 second or more to work (big text) and using javascript it instantaniously, if i use Jquery(zepto or others), the text take AGES to open in the webview, and without it, take max of 1 or 2 seconds.

=(

what im using to make the selected text BOLD:

function bold() {
    var range               = window.getSelection().getRangeAt(0);
    var selectionContents   = range.extractContents();
    var span                = document.createElement("span");
    span.appendChild(selectionContents);
    span.setAttribute("class","bold");
    span.style.fontWeight  = "bold";

    range.insertNode(span);
  }

and highlight (PS: highlight will not be a specific color, the user will choose thru a color picker that will return #xxxxxx

function foreground() {

var range               = window.getSelection().getRangeAt(0);
var selectionContents   = range.extractContents();
var span                = document.createElement("span");

span.appendChild(selectionContents);

span.setAttribute("class","foreground");
span.style.color            = "#" + colorbyUser;

range.insertNode(span);}

i think the bold/italic/strike/strikeThrough/underline can be only a specific class in css and i just add it and remove (dont know how to remove it, if its already set for the selected range)

but the background and foreground color it cant, because it can be different for each selection(letter/word or more)

sorry the bad english =x

Edit for C-smile

i got it, but i dont know how to get the element in this case:

<span class="bold">Hello   <span class="underline">C</span>-<span class="italic">Smile</span></span>

how can i remove the BOLD of the HELLO it the user SELECT just the HELLo, but dont remove the bold of the C-Smile??

is that possible? without jquery(take ages to load in a big document) or doc.execcomand(take ages to work in a big document)

1 Answer 1

0

If you are wrapping range into something like <span class="highlight"> then to remove that you need to unwrap it - get content node of the span and replace that span by its content node.

This exactly what $.unwrap() is doing in jQuery.

1
  • humm i got the idea, can you read my edit? i will read the unwrap function code, but i dont want to use jquery or doc.execcomando Oct 22, 2015 at 1:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.