/    Sign up×
Community /Pin to ProfileBookmark

window.getSelection()

Copy linkTweet thisAlerts:
Dec 24.2003

Howdy,

I have the following javascript code, which is supposed to help with some forums I am creating. When a ‘Bold’ button is clicked, the function will get the selected text and put a |B| around it.

[code=php]
function bold()
{
var userselection = “”;
if (window.getSelection) userselection = window.getSelection();
else if (document.getSelection) userselection = document.getSelection();
else if (document.selection) userselection = document.selection.createRange().text;

if (userselection == “”)
{
var Textin = prompt(“Enter the text you want to appear as bold:”, “”);
document.bheardform.message.value = document.bheardform.message.value + “|b|” + Textin + “|/b|”;
document.bheardform.message.focus();
}
else
{
NewContent = document.bheardform.message.value;
NewContent = NewContent.replace(userselection, “|B|” + userselection + “|/B|”);
document.bheardform.message.value = NewContent;
}
}
[/code]

The code does work, but its limited. It gets the selected text, and replaces the occurence of that text in the message with the same text but with a |B|/|/B|around it. The problem is, if there are two occurences of the selected string in the message, the first is the one to get wrapped with the |B| tags, not neccesarily the selected one.

So, rather than using window.getSelection() (and its variants), are there functions I can use to get the position (both start and end) of the selected text, so I can replace it accordingly?

And what function (example please ?) would I use to replace a substring of text?

Thanks for any help, I really appreciate it!

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@oleragDec 24.2003 — 
  • 1. I can only get this code to work in IE6 (not NN7) and am

    using an additional button to fire your "bold()" function.

    I do not get the proper "text" return if I use an "onSelect"

    event in the "text" object. Is this correct or should I be

    implementing the code differently.


  • 2. If the action works fine for you and you are able to

    capture and place the desired string of text in the

    "NewContent" variable, then iterate thru the string of the

    text object and replace all instances of the captured string

    with your enhancement tags.


    • Would you like a string iteration code snippet for this or have

    I not grasped what your after?
    Copy linkTweet thisAlerts:
    @oleragDec 24.2003 — Here's some sample code that will handle all occurances

    of your string search. Again, this only appears to work in

    IE6 - the "userSelection" is always null in NN7 consequently

    you'll always get a prompt window with that browser.
    [code=php]
    <html>
    <head>
    <script type="text/javascript">
    function clearField() {
    document.forms[0].field1.value = "";
    document.forms[0].field1.focus();
    }

    function makeBold() {
    var userSelection = "";
    var fieldVal = document.forms[0].field1.value;

    if (window.getSelection) {
    userSelection = window.getSelection();
    }
    else if (document.getSelection) {
    userSelection = document.getSelection();
    }
    else if (document.selection) {
    userSelection = document.selection.createRange().text;
    }

    if (userSelection == "") {
    var textIn = "";
    textIn = prompt("Enter the text you want to appear as bold:", "");
    if (textIn.length > 0) {
    document.forms[0].field1.value = replaceAll(fieldVal,textIn);
    }
    }
    else {
    document.forms[0].field1.value = replaceAll(fieldVal,userSelection);
    }
    document.forms[0].field1.focus();
    }

    function replaceAll(str,searchStr) {
    var replaceStr = "|B|" + searchStr + "|/B|";
    var re = new RegExp(searchStr, "g");
    return(str.replace(re, replaceStr));
    }
    </script>
    </head>
    <body>
    <center>
    <b>Text Replacement Example</b>
    <form>
    <input type="text" name="field1" size="50"><br>
    <input type="button" value="Bold" onClick="makeBold()">
    <input type="button" value="Clear" onClick="clearField()">
    </form>
    <hr>
    </center>
    </body>
    </html>
    [/code]
    ×

    Success!

    Help @stovellp spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.15,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...