6

textareaのユーザーが選択した領域を取得し、その<a>周りにタグを挿入する必要があります。

これを使用して、ユーザーが選択した領域を取得します。

var textComponent = document.getElementById('article');
var selectedText;

if (document.selection != undefined)
{
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
}

// Mozilla version
else if (textComponent.selectionStart != undefined)
{
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos)
}

これで、ユーザーが選択したテキストの文字列検索を実行し、その周りにタグを挿入できることがわかりましたが、たとえば、ユーザーが選択したテキストがテキストに2回表示された場合はどうなりますか。

こんにちは、さようなら。

ユーザーが必要なリンクの2番目の「あなた」を強調表示した場合、文字列の置換により、「あなた」のすべてのインスタンスの周りにタグが配置されます。

これを行うための最良の方法は何ですか？

4

2 に答える 2

5

これには私のjQueryプラグインを使用できます（デモ）：

$("#article").surroundSelectedText('<a href="foo.html">', "</a>");

またはgetInputSelection()、Stack Overflowに投稿した関数を数回使用して、すべての主要なブラウザーで選択の開始文字と終了文字のインデックスを取得し、テキストエリアの文字列置換を行うこともできますvalue。

var sel = getInputSelection(textComponent);
var val = textComponent.value;
textComponent.value = val.slice(0, sel.start) +
                      '<a href="foo.html">' +
                      val.slice(sel.start, sel.end) +
                      "</a>" +
                      val.slice(sel.end);
于 2012-05-24T14:02:44.560 に答える
2

なぜ選択したテキストをキャプチャするのですか？本当に必要なのは、タグをドロップする開始/終了位置です。

var textComponent = document.getElementById('article');
var selectedText;
var startPos;
var endPos;

// the easy way
if (textComponent.selectionStart != undefined)
{
    startPos = textComponent.selectionStart;
    endPos = textComponent.selectionEnd;
}
// the hard way
else if (document.selection != undefined)
{
    textComponent.focus();
    var sel = document.selection.createRange();
    var range = document.selection.createRange();
    var stored_range = range.duplicate();
    stored_range.moveToElementText(textComponent);
    stored_range.setEndPoint( 'EndToEnd', range );
    startPos = stored_range.text.length - range.text.length;
    endPos = startPos + range.text.length;
} 

// add in tags at startPos and endPos
var val = textComponent.value;
textComponent.value = val.substring(0, startPos) + "<a>" + val.substring(startPos, endPos) + "</a>" + val.substring(endPos);

このリファレンスから変更されたIEコード。

編集：改行に関するTimDownのコメントに注意してください。また、おそらく彼の解決策を使用してください。

于 2012-05-24T14:12:38.483 に答える