Javascript - highlighting half bolded words from selected text

Question

I want to enclose the word "utert" with span tag which has background css for the purpose of highlighting.

I am able to select the complete word using the start index and end index of word on the basis of $('div').text().

But while enclosing this selected word with span tag i am not able to highlight it as this word contains the "uter</strong>t" and it fails to enclose the span around it.

Any suggestion what i need to do for highlighting these kind of half bold,italic,underline words?

$scope.getTextNodesIn = function (node) {
    var textNodes = [];
    if (node.nodeType == 3) {
        textNodes.push(node);
    } else {
        var children = node.childNodes;
        for (var i = 0, len = children.length; i < len; ++i) {
            textNodes.push.apply(textNodes, $scope.getTextNodesIn(children[i]));
        }
    }
    return textNodes;
}

$scope.setSelectionRange = function(el, start, end) {
    if (document.createRange && window.getSelection) {

        var range = document.createRange();
        range.selectNodeContents(el);

        var textNodes = $scope.getTextNodesIn(el);
        var foundStart = false;
        var charCount = 0, endCharCount;
        for (var i = 0, textNode; textNode = textNodes[i++]; ) {
            endCharCount = charCount + textNode.length;
            if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i <= textNodes.length))) {
                range.setStart(textNode, start - charCount);
                foundStart = true;
            }
            if (foundStart && end <= endCharCount) {
                range.setEnd(textNode, end - charCount);
                break;
            }
            charCount = endCharCount;

        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);

    } else if (document.selection && document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(true);
        textRange.moveEnd("character", end);
        textRange.moveStart("character", start);
        textRange.select();
    }
}

$scope.makeEditableAndHighlight = function(colour) {

    var content,span,sel;
    sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    //document.designMode = "on";
    /*if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("backColor", false, colour);
    }*/

    var range = window.getSelection().getRangeAt(0);

    if(range.commonAncestorContainer.toString() != '[object Text]')
    {

        if(typeof window.getSelection().anchorNode.parentElement != 'undefined')
            var cloneContent = window.getSelection().focusNode.parentElement;
        else
            var cloneContent = window.getSelection().focusNode.parentNode;
        span = document.createElement('SPAN');
        span.className='startIndex-'+startIndex+' endIndex-'+endIndex+'';
        span.style.background = 'pink';
        span.innerHTML = range.toString();
        //cloneContent.outerHTML.replace(range.toString(),span.outerHTML);
        $(cloneContent).replaceWith(cloneContent.outerHTML.replace(range.toString(),span.outerHTML));
        return;
    }
    else
    {
        content = $(content).text();
    }

    content = range.cloneContents();
    range.deleteContents();
    span = document.createElement('SPAN');
    span.className='startIndex-'+startIndex+' endIndex-'+endIndex+'';
    span.style.background = 'pink';
    span.appendChild(content);
    var htmlContent = span.innerHTML;
    range.insertNode(span);

    /*if(window.getSelection().focusNode.parentNode.style.backgroundColor == 'pink')
    {
        var parent_node = getOutterMostParent(window.getSelection().focusNode);
         $(listId).addClass('startIndex-'+ parseInt(startIndex) +' endIndex-'+parseInt(endIndex));
    }   
    document.designMode = "off";*/
    sel.removeAllRanges();
    //range.detach();

}

$scope.highlight = function(colour) {
    var range, sel;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            //if (!document.execCommand("backColor", false, colour)) {
                $scope.makeEditableAndHighlight(colour);
            //}
        } catch (ex) {
            $scope.makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("backColor", false, colour);
    }
}

$scope.selectAndHighlightRange=function(id, start, end) {
    $scope.setSelectionRange(id, start, end);
    $scope.highlight("pink");
}

Show us your code. Not all of it... just the relevant part. – Robert Harvey Sep 02 '16 at 14:11 — Robert Harvey, Sep 02 '16 at 14:11

Mayday · Answer 1 · 2016-09-02T14:27:19.910

0

You can use 1 div with 2 spans inside, and use different css classes for the 2 spans.

and use the css rules you want to achieve so

<div><span class="bolder">uter</span><span class="no-bolder">t</span></div>

in the css section:

span.bolder {
  font-weight: bold;
}

span.bolder {
  font-weight: bold;
  background-color: yellow;
}

<div><span class="bolder">uter</span><span class="no-bolder">t</span></div>

edited Sep 02 '16 at 14:27

answered Sep 02 '16 at 14:14

Mayday

4,680
5
24
58

Can you show the exact code of wrapping the selected part? – Bhavesh Tilvani Sep 02 '16 at 14:17
You don't really even need the no-bolder class, I just wrote it in case you want to add more css rules – Mayday Sep 02 '16 at 14:23
want to highlight the selected word with background color with the usage of span. – Bhavesh Tilvani Sep 02 '16 at 14:24
How to enclose text like "utert" with the span tag..Does anyone have solution of that using javascript? – Bhavesh Tilvani Sep 04 '16 at 14:01
why do you need to enclose it? you can have a span with no style and just toggle on and off a css classs... I don't think there is any special good reason not to have both spans... – Mayday Sep 04 '16 at 14:28
exactly..both the span i need ..but how to implement it in javascript..can you help i am trying this from last two days. – Bhavesh Tilvani Sep 04 '16 at 14:36
Mayday - any suggestion ?? any solution ?? – Bhavesh Tilvani Sep 04 '16 at 14:45
the code I put you, and toggle on and off the bolder class via javascript – Mayday Sep 04 '16 at 15:40
This is documented anywhere in internet, check here, and see what adapts better to your code: http://stackoverflow.com/questions/3452778/jquery-change-class-name – Mayday Sep 04 '16 at 15:48
but based on my code how to enclose the word 'utert' using the range object as i have used in my code. – Bhavesh Tilvani Sep 04 '16 at 15:53

Javascript - highlighting half bolded words from selected text

1 Answers1