hoe vervang ik mijn geselecteerde tekst in jQuery?

hoe vervang geselecteerde tekst in html textarea?

mardagz to [b]mardagz[\b]

hier is mijn code maar zal niet werken ..

function getSelectedText(){ 
if(window.getSelection){ 
    return window.getSelection().toString(); 
} 
else if(document.getSelection){ 
    return document.getSelection(); 
} 
else if(document.selection){ 

    return document.selection.createRange().text; 
}} 



function bbrep(start, end){
 $("#pPost").val($("#pPost").val().replace(getSelectedText(), start + getSelectedText() + end))};

sleutel

$("#bbbold").click(function(){
          bbrep("[b]", "[/b]");
          return false;      
 })

Heeft iemand hier een idee voor? :)

2
uw getSelectedText-methode lijkt niets terug te doen in Google Chrome.
toegevoegd de auteur Kevin B, de bron
Begin door te zien of getSelectedText() iets retourneert.
toegevoegd de auteur kba, de bron
toegevoegd de auteur Matt R, de bron
nog steeds hetzelfde ... broo whheww
toegevoegd de auteur mardagz, de bron
owhh, ik denk het wel, maar je hebt een functie om deze bro op te lossen? :)
toegevoegd de auteur mardagz, de bron

4 antwoord

Here a complete tested & working example

function getSelectedText() {
    var len =$("#pPost").val().length;
    var start = $("#pPost")[0].selectionStart;
    var end = $("#pPost")[0].selectionEnd;
    var sel = $("#pPost").val().substring(start, end);
    return sel;
}


function bbrep(start, end){
var tmpVal = getSelectedText();
$("#pPost").val($("#pPost").val().replace(tmpVal, start + tmpVal + end));

}

$("#bbbold").click(function(){
      bbrep("[b]", "[/b]");
      return false;      

})

hier is de html-codefragment


<input type="button" id="bbbold" value="clcikMe" />

here is a jsfiddle example i just did "it works"


Another jsfiddle that takes the index into account too, jsfiddle.net/SU7wd/58 <- works on that second a too

12
toegevoegd
@ChrisKerekes, voor dat alles wat je hoeft te doen is een betere vervanging, een die de index in rekening zal nemen, een kijkje nemen jsfiddle.net/SU7wd/58 <- werkt ook op die seconde
toegevoegd de auteur Daniel, de bron
Opgemerkt moet worden dat dit altijd het EERSTE voorkomen van de geselecteerde tekst zal vervangen, niet noodzakelijkerwijs de geselecteerde tekst. IE: probeer de tweede 'a' in mardagz of een van de vele 'a's in abracadbra te vervangen ...
toegevoegd de auteur Chris Kerekes, de bron
ja kerel .. :) dank je :) iv'e heb het .. :)
toegevoegd de auteur mardagz, de bron

Voor het geval er later iemand hier komt, zal ik mijn oplossing delen die ik heb gevonden na wat onderzoek, gebaseerd op wat hierboven is gezegd. Ik was op zoek naar een oplossing die zou vervangen wat ik vraag om te vervangen (en niet naar dezelfde substrings ergens in het tekstgebied), en ook om te stoppen met de focus aan het einde van de ingevoegde tekst.

Dit is de oplossing waar ik bij ben gekomen:

function text_with_insert(str, index, value) {
    return str.substr(0, index) + value + str.substr(index);
}    

function surround_sel_text( str_start, str_end ) {
  var el = $("#pPost");
  var focus_idx = el[0].selectionEnd + str_start.length + str_end.length;

  var text_with_end_insert = text_with_insert( el.val(), el[0].selectionEnd, str_end );
  el.val( text_with_insert( text_with_end_insert, el[0].selectionStart, str_start ) );
  el[0].selectionStart = focus_idx;
  el[0].selectionEnd = focus_idx;
}

$("#bbbold").mousedown(function() {
      surround_sel_text( '[b]', '[/b]' );
      return false;      
});
2
toegevoegd

Dit werkt:

function bbrep(start, end) {
    var str = $("#pPost").val();
    var word = "bar";//getSelectedText();
    var re = new RegExp("(\\b" + word + "\\b)", "ig");
    $("#pPost").val(str.replace(re, start + "$1" + end));
};

Nochtans moest ik een string hard-coderen omdat uw methode getSelectedText() niets retourneert.

Bewerk:

Instead of using .click, use .mousedown

Tegen de tijd dat .click gebeurt, is de tekst niet langer geselecteerd.

1
toegevoegd
Mijn bewerking lost dat probleem op, denk ik.
toegevoegd de auteur Kevin B, de bron
Nogmaals ... gebruik mousedown niet mouseup of klik moet je vangen voordat de selectie verdwijnt.
toegevoegd de auteur Kevin B, de bron
ja dat is het nu im op zoek naar functie om geselecteerde tekst te krijgen ...
toegevoegd de auteur mardagz, de bron
hoe dan ook, iv'e heeft dit toegevoegd $ (this) .live ('mouseup', function() {selection = getSelectedText ();}); er is een resultaat maar [b] [/ b] mardagz in plaats van [b] mardagz [/ b]
toegevoegd de auteur mardagz, de bron
owhhh ik heb het gem :): hihi, ik heb gewoon nieuwe functie aan het genereren :): hihi, heel erg bedankt .. :)
toegevoegd de auteur mardagz, de bron

Ok ik moest dit herbouwen om met mijn asp.net controle te werken. Denk er eens over na hoe eenvoudig het zal zijn. Deze vervangt het geselecteerde en niet het eerste woord dat in de andere wordt gevonden.

Zorg er wel voor dat je het de ID van je tekstvak geeft.

Je kunt de functie zoals deze makeBBCode aanroepen ("[b]", "[/ b]"). Ik gebruikte OnClientKlik op een asp beeldknop om het te noemen. [Ex: OnClientClick = 'makeBBCode ("[b]", "[/ b]")']

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

    String.prototype.insertAt = function (index, string) {
        return this.substr(0, index) + string + this.substr(index);
    }

    function makeBBCode(start, end) {
        var txtBox = document.getElementById("Object_Id_Here")
        txtBox.value = txtBox.value.insertAt(txtBox.selectionEnd, end).insertAt(txtBox.selectionStart, start);
    }
</div> </div>

1
toegevoegd