質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

3262閲覧

Javascriptでの選択位置(※文字数)の取得

hplpjpd

総合スコア20

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

3クリップ

投稿2019/05/02 10:33

前提・実現したいこと

window.getSelection()が返すSelection(もしくは、
window.getSelection().getRangeAt(0)が返すRange)について、
選択位置を返すプロパティがもし存在するならば、ご教授頂きたいです。
選択位置と表現しているのは、pxで表現されるような位置ではなく、
テキストの何文字目かを示す位置(下に示す例のいずれか)です。
(例)id=〇〇のdivタグ内テキストの45文字目
(例)id=〇〇のdivタグ内テキストの5行目,6文字目

最終目標は
例えばcontenteditableに
C|G|Am|Em<br>
|F|C|F|G|
のようなコード進行が表示されていて、
2行目最初のFをクリックした場合
グローバル変数:現在再生位置を5(番目のコード)に設定した上で
Fのコードを再生することです。

発生している問題・エラーメッセージ

該当のソースコード

<script> window.onload = function () { var test = document.getElementById("test") var range = document.createRange(); range.setStart(test.childNodes[8], 10); range.setEnd(test.childNodes[8], 15); window.getSelection().addRange(range); var watch = window.getSelection().getRangeAt(0); var breakpoint = 'here'; } </script> <div contenteditable=true id='test'> 1234567890<br> 1234567890<br> 1234567890<br> 1234567890<br> 1234567890<br> 1234567890<br> 1234567890<br> 1234567890 </div>

試したこと

watchでwindow.getSelection().getRangeAt(0)のプロパティを眺めたものの、
選択位置を示すそれらしいプロパティが見つかりませんでした。

補足情報(FW/ツールのバージョンなど)

Google Chrome
バージョン: 74.0.3729.131(Official Build) (64 ビット)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

開発者ツールでエラーを確認してますか?

range.setEnd(test.childNodes[8], 15);

⇡Uncaught IndexSizeError: Failed to execute 'setEnd' on 'Range': The offset 15 is larger than the node's length (11).
ってエラー出てますよね。
範囲外を指定しているので、11とか範囲内で再度指定して下さい。

投稿2019/05/02 14:13

oikashinoa

総合スコア2826

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hplpjpd

2019/05/03 02:26 編集

回答ありがとうございます。 申し訳ありません。投稿時にインデントの半角スペース*4が消えました。 (VScodeデフォルトのインデント設定,Editor:Format On Save)
guest

0

自己解決

プロパティではないですが、(例)id=〇〇のdivタグ内テキストの5行目,6文字目
は取得できたためクローズします。
意味不明ですが、Array​.prototype​.indexOf()?で行数が取得できました。

↓test.html

<script> window.onclick = function () { var columnnumber = Array.prototype.slice.call(document.getElementById("test").childNodes).indexOf(window.getSelection().anchorNode) alert('divタグ内テキストの'+(parseInt(columnnumber/2)+1)+'行目,');///2はbrを外す処理 alert(window.getSelection().anchorOffset+'文字目'); ////////////蛇足/////////////// cursor_play=0; cursor_play=parseInt(cursor_play)+parseInt(document.getElementById("test").childNodes[columnnumber].textContent.slice(0,window.getSelection().anchorOffset).split('|').length - 1); if(columnnumber>=1) //何度もgetElementByIdを行うのは処理が遅くなる? for (var i = columnnumber-1; i >= 0; i--) { cursor_play=parseInt(cursor_play)+parseInt(document.getElementById("test").childNodes[i].textContent.split('|').length - 1); } alert(parseInt(cursor_play)+1+'(番目のコード)を再生する処理を記載してください。'); } var cursor_play=0; </script> <div contenteditable=true id='test' name='test'> C|G|Am|Em<br> |C|G|Am|Em<br> |C|G|Am|Em<br> |C|G|Am|Em<br> |C|G|Am|Em<br> |C|G|Am|Em<br> |C|G|Am|Em </div>

投稿2019/05/04 04:17

hplpjpd

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問