Pegar apenas parte do "value" de um campo

[vini_loock]

Olá.

Eu venho já a algum tempo analizando uns scripts js, e onten resolvi pegar nesse assunto.

Eu to fazendo um.. é.. hum... não sei como se chama, é parecido com esse que tem aqui no forum na hora de postar.

Só que eu quero pegar apenas a parte que estiver selecionada do textarea.

Ex:

tenho um texto:(num textarea)

Esse texto é apenas para demonstração da minha duvida.

E eu seleciono somente "Esse texto", dai eu quero adicionar as tag antes e depois do texto.

Eu consegui inserir a tag em volta do texto todo só.

js

function editorHTML(){
        var valorButton = document.getElementById("teste").value;
        var valotArea = document.getElementById("area").value;
        
        document.getElementById("area").value = "[" + valorButton + "]" + valotArea + "[/" + valorButton + "]";
    }

html

<input type="button" name="teste" id="teste" onClick="editorHTML();" value="TAG" style="font-size: 0px; width: 40px; height: 40px; border: 2px solid #00ccff; background-color: #f4f4f4;">
<textarea name="area" id="area"></textarea>

Eu baixei alguns scripts aki do SB, mas eles são meio avançados, e eu quero usar somente os comando que eu conheço.

Como eu to aprendendo, seria legal que ao invés de postar o script pronto, me falasse qual função usar. Mas fica a seu critério.

Vlw

Editado Junho 21, 2010 por vini_loock

[Rafael Laurindo]

Amigão, acho que você está querendo, é algo chamado, editor para BBCode, ou seja, para inserir BBCode. Fiz este para rodar só em Netscape_s (Chrome, Firefox, etc...), se você quiser descobrir as "artesmanhas" do IE, vai que é tua...

Vamos lá...

function tagInsert(id, tagStart, tagEnd)
{
    //cria uma instancia, através do id informado, do objeto HTML
    var el = document.getElementById(id)

    //Pega a quantidade total de caracteres contida no elemento
    var selLength = el.textLength
    //Pega a posição inicial do cursor
    var selStart = el.selectionStart
    //Pega a posição final do cursor
    var selEnd = el.selectionEnd
    //Copia a string à esquerda da posição inicial do cursor
    var back = el.value.substring(0, selStart)
    //Copia o que está selecionado
    var txt = el.value.substring(selStart, selEnd)
    //Copia a string à direita da posição final do cursor
    var front = el.value.substring(selEnd, selLength)
    if(tagEnd){
        //o innerHTML só funciona em elementos que não possuem value, tendo esses que ser inseridos com o el.value = ...
        el.value = back + tagStart + txt + tagEnd + front
        selStart += tagStart.length + txt.length + tagEnd.length
    }
    else{
        el.value = back + tagStart + txt + front
        selStart += tagStart.length
    }
    //posiciona o cursor ao final, depois da inserção do BBCode
    el.selectionEnd = selStart
}

<textarea id="txtTest1" onselect="test(this.id, '[b]','[/b]')"></textarea>
	<textarea id="txtTest2" onselect="test(this.id, '[input/]')"></textarea>

Pode rodar a roleta aí que está funcionando, rs. Você mesmo, pode fazer as modificações, mudando o evento para onclick, em um button.

Última coisa, procure mudar o título do seu tópico para algo assim, Inserir tag atrás e na frente de string selecionada, para ficar mais coerente, ao executar uma busca ninguém vai digitar

Pegar apenas parte do "value" de um campo

. Falou.

Abração.

Editado Julho 28, 2010 por Rafael Laurindo