Click here to Skip to main content
15,506,025 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi guys, not sure if anyone can help me.
I'm selecting(highlighting) text from a div and on the click of a button I'm making it bold.

The function works - it does make the text Bold by adding my Span tags, however,
the document.body.innerHTML.replace replaces the first instance it find and not my selection. If I want to the second hello in this example:

'hello, hello!' - even if I select the second hello, the first one is the one that will turn bold.

Any help with this? Function below.

JS:
function makeBold(){
	var highlight = window.getSelection();  
 
    var span = '<span style="font-weight:bold;">' + highlight + '</span>';

    document.body.innerHTML = document.body.innerHTML.replace(window.getSelection(), span);
}

HTML:
<input type="button" value="Make Bold" onClick="makeBold();"> 
Posted

1 solution

the javascript string.replace method actually takes a RegExp as it's first argument. Without specifying it as 'greedy' it will only match the first.
Ordinary regex in javascript would look like /expression/g, the g stands for greedy. As you are creating one from a string, just use the RegExp constructor like this:

JavaScript
function makeBold(){
	var highlight = window.getSelection();  
 
    var span = '<span style="font-weight:bold;">' + highlight + '</span>';
 
    document.body.innerHTML = document.body.innerHTML.replace(new RegExp(highlight , 'g'), span);
}


EDIT: now I have read the question again >_<


JavaScript
function makeBold(){
 
    var span = '<span style="font-weight:bold;">' + highlight + '</span>';

    var selected, range;
    if (window.getSelection) {
        selected= window.getSelection();
        if (selected.rangeCount) {
            range = selected.getRangeAt(0);
            range.deleteContents();
            range.insertNode(document.createTextNode(span));
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.text = span;
    }
 
}



EDIT2: and now the version that inserts html (i hope)

JavaScript
function getSelectionHtml() {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            
            var html = '<span style="font-weight:bold;">' + range + '</span>'
            range.deleteContents();
            
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(false);
        range.pasteHTML(html);
    }

}


Now this one I HAVE tested:
https://jsfiddle.net/dKaJ3/1261/[^]
 
Share this answer
 
v3
Comments
LighthouseCall 17-Apr-15 4:32am    
Hi, thankyou for your answer, I had no idea about this. However, I tested your line of code;
document.body.innerHTML = document.body.innerHTML.replace(new RegExp(highlight , 'g'), span);

and now all the instances turn bold. (like in the example above, all hello's would go bold.

Thank you for you answer though.
Andy Lanng 17-Apr-15 4:38am    
Ah! I should read the question more thoroughly >_<
I will update my answer
LighthouseCall 17-Apr-15 5:05am    
Hey! It's sticking to the selected/highlighted one now, but instead of making it bold I actually get the '<span style="font-weight:bold;">' in the text.

Once again, thanks for your answer. I don't want to take up too much of your time, you've been very helpful.
Andy Lanng 17-Apr-15 5:07am    
Ha - no worries. I'd test it if it was c# but trial and error is usually the way my JS gets written.

As you can tell, this is also a learning experience for me so it's not time wasted ;)
Andy Lanng 17-Apr-15 5:14am    
I think it must be this row:
range.insertNode(document.createTextNode(span))
try just:
range.insertNode(span)

can you debug it to see what it's doing?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900