[新着] Webテンプレートを仮オープンしました
に載っている。
// 削除範囲
var range = window.getSelection().getRangeAt(0);
// 削除範囲の中身を検索するTreeWalker
var walker = document.createTreeWalker(
range.commonAncestorContainer, // 検索対象とする部分ノードの頂点
NodeFilter.SHOW_ELEMENT, // 要素ノードだけを検索する
function (n) { // 要素ノードの条件フィルタ
if (n.tagName == 'SPAN' && n.id.match(/^SPA_/)) {
// span要素かつid="SPA_n"ならばそのノードを受け入れる
return NodeFilter.FILTER_ACCEPT;
} else {
// それ以外の要素ノードはスルーする
return NodeFilter.FILTER_SKIP;
}
},
false // 実体参照を展開しない
);
// 削除範囲の開始位置を含むノードから開始
walker.currentNode = range.startContainer;
while (walker.nextNode()) {
// 削除用Range内に含まれるspan[@id="SPA_n"]要素が
// walker.currentNodeとして順番に返ってくる。
// 削除範囲の終了位置を含むノードに達したら終了
if (walker.currentNode == range.endContainer)
break;
}<HTML><HEAD><TITLE>Sample</TITLE>
<SCRIPT Language="JavaScript" src="prototype.js"></script>
<SCRIPT Language="JavaScript">
<!--
var x=1;
var WORD=new Array;
WORD[0]="test_WORD";
function linemarker(){
var COL=document.FORM1.SELE.value;
b=$("DIV1");
if(window.getSelection()!=""){
if(COL=="clear"){
var range_word = window.getSelection().getRangeAt(0);
str=window.getSelection().toString();
thisID=range_word.commonAncestorContainer.parentNode.id;
var splitNo=thisID.split("_");
var GetNo=Number(splitNo[1]);
//選択文字列完全一致削除
if(str==WORD[GetNo]){
var CLRWORD=WORD[GetNo];
for(m=GetNo;m<x-1;m++){
WORD[m]=WORD[m+1]; WORD[m+1]="";
$("SPA_"+(m+1)).id="SPA_"+m;
document.FORM1.SELE2.options[m].text = document.FORM1.SELE2.options[m+1].text;
}
x--;
deleteNode = document.getElementById(thisID);
range2 = document.createRange();
range2.selectNodeContents(deleteNode);
dummy = range2.extractContents();
range2.setStartBefore(deleteNode);
range2.insertNode(dummy);
range2.selectNode(deleteNode);
range2.deleteContents();
document.FORM1.SELE2.length--;
}
//選択文字列部分削除
else {
thisTag=range_word.commonAncestorContainer.parentNode.tagName;
if(thisTag=="SPAN"){
var dl_mark = document.createElement('span');
dl_mark.setAttribute('id', 'SPA_0');
range_word.surroundContents(dl_mark);
var pId=$("SPA_0").parentNode.id;
var pColor=$("SPA_0").parentNode.style.backgroundColor;
var pNo=pId.split("_");
allDoc=b.innerHTML;
b.innerHTML=allDoc.replace('<span id="SPA_0">'+range_word+'</span>','</span>'+range_word+'<span id="SPA_0">');
$("SPA_0").id="SPA_"+x;
spansID=$("SPA_"+x).id;
$(spansID).style.backgroundColor=pColor;
if($(pId).innerHTML==""){ //選択文字列がspanの先頭の場合
$(pId).removeAttribute("style");
$(pId).removeAttribute("id");
allDoc=b.innerHTML;
b.innerHTML=allDoc.replace('<span>','');
$("SPA_"+x).id=pId;
WORD[pNo[1]]=$(pId).innerHTML;
document.FORM1.SELE2.options[pNo[1]].text=WORD[pNo[1]];
x--;
}
else if($("SPA_"+x).innerHTML==""){ //選択文字列がspanの最後尾の場合
$("SPA_"+x).removeAttribute("style");
$("SPA_"+x).removeAttribute("id");
allDoc=b.innerHTML;
b.innerHTML=allDoc.replace('<span>','');
WORD[pNo[1]]=$(pId).innerHTML;
document.FORM1.SELE2.options[pNo[1]].text=WORD[pNo[1]];
x--;
}
else{
WORD[pNo[1]]=$(pId).innerHTML;
document.FORM1.SELE2.options[pNo[1]].text=WORD[pNo[1]];
WORD[x]=$("SPA_"+x).innerHTML;
document.FORM1.SELE2.length++;
document.FORM1.SELE2.options[x].text=WORD[x];
}
x++
}
else{
}
}
}
else{
var range = window.getSelection().getRangeAt(0);
var marker = document.createElement('span');
marker.setAttribute('id', 'SPA_0');
range.surroundContents(marker);
WORD[x]=range;
document.FORM1.SELE2.length++;
document.FORM1.SELE2.options[x].text=range;
$("SPA_0").id="SPA_"+x;
spansID=$("SPA_"+x).id;
$(spansID).style.backgroundColor=COL;
x++
}
}
}
function test_inner(){
alert($("DIV1").innerHTML);
}
//-->
</SCRIPT>
</HEAD>
<BODY id="BODY1">
<CENTER>
<H1>選択された文字の取得</H1>
</CENTER>
<form name="FORM1">
<select name="SELE">
<option value="cyan">cyan</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="clear">clear</option>
</select>
<INPUT Type="button" value="check" onMouseDown="linemarker()">
<select name="SELE2">
<option>ハイライト文字列</option>
</select>
<br>
<INPUT Type="button" value="inner" onMouseDown="test_inner()"><br>
</form>
<div id="DIV1">
テキストサンプル：文字列を選択してcheckボタンで色付けor削除。<br>
innerは指定ウィンドウの内容表示です。 <br>
セレクト「ハイライト文字列」にはマーク文字列が入ります。<br>
</div>
</BODY></HTML>/*
document.implementation.hasFeature('HTML' , '2.0')
document.implementation.hasFeature('CSS2' , '2.0')
document.implementation.hasFeature('Range', '2.0')
Array.prototype.forEach
*/
var MarkerList = [ ];
function getSelectionToAppendMarker (formElement) {
var selection = getSelection();
if (selection.toString()) {
var range = selection.getRangeAt(0);
var element = document.createElement('span');
selection.collapseToStart();
element.style.backgroundColor = formElement.elements['select.color'].value;
MarkerList = checkMarkedRange(MarkerList, range);
MarkerList.unshift( { range : range, element : element } );
range.surroundContents(element);
displayStringList(formElement.elements['select.string'], MarkerList);
}
}
function getSelectionToDeleteMarker (formElement) {
var selection = getSelection();
if (selection.toString()) {
var range = selection.getRangeAt(0);
selection.collapseToStart();
MarkerList = checkMarkedRange(MarkerList, range);
range.commonAncestorContainer.normalize();
displayStringList(formElement.elements['select.string'], MarkerList);
}
}
function displayStringList (selectElement, markerList) {
deleteNodeContents(selectElement);
markerList.forEach (
function (marker) {
var optionElement = document.createElement('option');
optionElement.appendChild(document.createTextNode(marker.range.toString()));
selectElement.add(optionElement, null);
} );
}
function checkMarkedRange (oldMarkerList, range) {
var newMarkerList = [ ], tempList = [ ];
oldMarkerList.forEach(
function (marker) {
if (compareRangesBoundary(range, marker.range)) tempList.push(marker);
else newMarkerList.push (marker);
} );
tempList.forEach(function (marker) { deleteMarker(marker); } );
return newMarkerList;
}
function compareRangesBoundary (range1, range0) {
if (range1.compareBoundaryPoints(Range.START_TO_END, range0) == 1 &&
range1.compareBoundaryPoints(Range.END_TO_START, range0) == -1) {
if (range1.compareBoundaryPoints(Range.START_TO_START, range0) == 1)
range1.setStart(range0.startContainer, range0.startOffset);
if (range1.compareBoundaryPoints(Range.END_TO_END, range0) == -1 )
range1.setEnd(range0.endContainer, range0.endOffset);
return range0;
else
return null;
}
function deleteMarker (marker) {
var documentFragment, range = marker.range, element = marker.element;
range.selectNodeContents(element);
documentFragment = range.extractContents();
range.setStartBefore(element);
range.insertNode(documentFragment);
range.selectNode(element);
range.deleteContents();
range.detach();
}
function deleteNodeContents (node) {
var range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();
range.detach();
}
</script>
<h1>選択された文字の取得</h1>
<form action="#">
<p>
<select name="select.color">
<option value="cyan">cyan</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="clear">clear</option>
</select>
<input type="button" value="ハイライトする" onmousedown="getSelectionToAppendMarker(this.form)">
<input type="button" value="ハイライト消去" onmousedown="getSelectionToDeleteMarker(this.form)">
</p>
<p>
<select name="select.string">
<option>ハイライト文字列</option>
</select>
</p>
</form>
<p>
テキストサンプル：文字列を選択して
「ハイライトする」ボタンで色付け、
「ハイライト消去」で削除。
「ハイライト文字列」にはマーク文字列が入ります。
</p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Sample</title> <script type="text/javascript">