JS : テキストエリア内の選択文字列の置き換え

最近、セキュリティ制限やらで prompt が使え無い場合があって、
自分でセキュリティ設定が必要になりますが、それはとりあえず置いておいて、
テキストエリア内の選択文字列をタイトルにしたリンクの作成方法です

<script type="text/javascript">

function createURLLink() {

	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var txt = "";
	var strUrl = "";
	if (userAgent.indexOf("msie") > -1) {

		var objSelectedText = document.selection
		var objTextRange = objSelectedText.createRange( )

		if (objTextRange.text.length == 0 ) {
			return;
		}
		try {
			strUrl = prompt("URLリンク作成","http://");
			if ( strUrl != "" && strUrl != "http://" && strUrl+"" != "null" ) {
				txt = objTextRange.text
				txt = "<a href=\""+strUrl+"\" target=\"_blank\">"+txt+"</a>"
				objTextRange.text = txt;
			}
		}catch( e ){}
	}
	else {
		var obj = document.getElementById("txt091231d")
		var ns = obj.selectionStart;
		var ne = obj.selectionEnd;
		var nl;

		if ( ns != ne ) {
			strUrl = prompt("URLリンク作成","http://");
			if ( strUrl != "" && strUrl != "http://" && strUrl+"" != "null" ) {
				txt = obj.value.substring(ns, ne);
				txt = "<a href=\""+strUrl+"\" target=\"_blank\">"+txt+"</a>"
				nl = txt.length
				txt = obj.value.substring(0, ns)
					+ txt + obj.value.substring(ne,obj.value.length);
				obj.value = txt;
				obj.setSelectionRange(ns,ns+nl);
			}
		}

	}

}

</script>

<TEXTAREA id=txt091231d rows=5 wrap=off cols=50></TEXTAREA>
<input type=button value="リンク作成" onClick='createURLLink()'>

サンプル文字列

JS : ブログ内でテキストエリアの作成方法

上はそのまま HTML を書いてますが、下は JavaScript のdocument.write で書き出しています。Seesaa では HTML をそのまま書いてもうまくいくようになっていますが、プログの本文は、アプリケーション的にはテキストエリアなので、ひょっとして場合によってはうまくいかない可能性もあります。そういう場合は JavaScriptバージョンで対応できます

<script type="text/javascript">
str="";
str+="<"+"textarea wrap=off id=txt091231a cols=50 rows=5><"+"\/textarea> ";
document.write(str);
</script>

で、以下のテキストエリアは自作の JavaScript アプリケーションなので、タブが使えます。選択して一括で複数行にタブが挿入できて、SHIFT+TAB で逆にタブを削除できます。

<SCRIPT 
	type="text/javascript"
	src="http://lightbox.on.coocan.jp//tabtextarea.js">
</SCRIPT>
<script type="text/javascript">
createTabTextArea("txt091231c",50,5);
</script>

▲ 使い方です。そのまま使ってもいいし、.js ダウンロードしてもらってもいいです

※ この場合は name 属性しか無いので JavaScript で参照は以下のようになります
document.getElementsByName("txt091231c")[0].value

Ruby : Seesaa のブログ設定画面で、Form選択からコンボボックス、ラジオボタン、チェックボックスの設定

ブログを新しく作成した場合、初期設定がけっこうたいへんです。
Ruby に全部やらせてしまおうと以前から思ってましたので、手始めとして
ブログ設定の自動設定を作成しました。

全てうまくいったら WEB サービスして公開します

#!/usr/local/bin/ruby
print "Content-type: text/html\n\n"

require "cgi"
cgi = CGI.new

ENV['GEM_HOME']="/home/lightbox/gems"
$LOAD_PATH.push('/home/lightbox/lib')

require 'rubygems'
require 'mechanize'

agent = WWW::Mechanize.new
#seesaa にログイン
page = agent.get("https://ssl.seesaa.jp/www/pages/welcome/login/input")
form = page.forms.first
form["member__email"] = "メールアドレス"
form["member__password"] = "パスワード"
form.submit

# 対象ブログのページ
page = agent.get('https://blog.seesaa.jp/pages/my/blog/home/?blog_id=ブログ番号')

# 設定ページ
page = agent.get('https://blog.seesaa.jp/pages/my/blog/settings/basics/edit/input')

# 3番目のフォーム
form = page.form_with(:name => 'myform')

# カテゴリコンボボックスを IT/インターネット にセット
form.field_with(:name => 'blog_category_id').value = "41"
# form.field_with(:name => 'blog_category_id').options[1].value

# メールマガジン無し
form.checkbox_with(:name => 'blog__mailmag_text').uncheck
form.checkbox_with(:name => 'blog__mailmag_html').uncheck
form.checkbox_with(:name => 'blog__mailmag_summary').uncheck

# コメントを通知する
form.radiobuttons_with(:name => 'blog__alert_comment')[0].check
form["blog__alert_email"] = "メールアドレス"

# 共有ヘッダを無しでセット
form.radiobuttons_with(:name => 'blog_ext__common_header')[1].check

# 更新
page = form.click_button(form.buttons[1])

print "seesaa : settings_basics : update : ok"

JavaScript : 正規表現の任意の文字列

解りやすい確実そうな方法が [\s\S]+ でした。
\s : スペース、タブ、フォームフィードなどの任意の空白文字
\S : 空白文字以外の任意の文字

[.\n]+ ができそうですが、JavaScript でエラーになります。
他の言語でおいおいチェックしますが、今回の結果です。

.+ はうまく動くのですが、当然ですが . に改行は含まれません
テキスト全体を /g で検索する場合は注意して下さい。

テキスト全体では、[\s\S]+? の後ろに終わって欲しい文字
または文字列を指定して下さい。これは重要です。

JavaScript : g の無い正規表現の結果

/g が無い場合は、配列に結果が入ります。
最初に全ての一致、それ以降はサプマッチです
しかし、ReqExp.$1 にもセットされるので、ループ処理で使う場合しか使いません。

var str = '<A href="URL" target="_blank">テキスト</A>';
var arr = str.match(/<a[\s\S]+?>(.+)<\/a>/i);
alert(arr[0]);
alert(arr[1]);
alert(RegExp.$1);

JavaScriptの正規表現

このページのリンクらしき文字列を全て取得します。

function getLink1() {
	var str = document.getElementsByTagName("BODY")[0].innerHTML;
	var arr = str.match(/<a[^>]+>/ig);
	str = "";
	var len = arr.length;
	for( i = 0; i < len; i++ ) {
		str += arr[i] + "\n"
	}
	document.getElementById("resultLinkText").value = str;
}
function getLink2() {
	var str = document.getElementsByTagName("BODY")[0].innerHTML;
	var arr = str.match(/<a[\s\S]+?>/ig);
	str = "";
	var len = arr.length;
	for( i = 0; i < len; i++ ) {
		str += arr[i] + "\n"
	}
	document.getElementById("resultLinkText").value = str;
}

function getLink3() {
	var str = document.getElementsByTagName("BODY")[0].innerHTML;
	var arr = str.match(/<a[\s\S]+?a>/ig);
	var arr2;
	
	str = "";
	var len = arr.length;
	for( i = 0; i < len; i++ ) {
		var arr2 = arr[i].match(/>(.+)</i);
		try {		
			str+= arr2[1] + "\n";
		} catch(e){}
	}
	document.getElementById("resultLinkText").value = str;
}

※ BODY より取得するので、IFRAME 内は対象外です
※ <a[^>]+> は、<a で始まって、> 以外が1つ以上続いて > で終わると言う意味です。
※ <a[\s\S]+?> は、<a で始まって、
任意の文字が1つ以上続いて > で終わる最短の文字列と言う意味です。
※ <a>〜</a> の 〜は単純には取得できません
一旦取得したアンカーより内側の文字列を取得しています


※ /ig の i は、大文字小文字を区別しないという意味です。
※ /ig の g は、全ての対象を最後まで探すという意味です。

■ もう少し詳しく
JavaScriptの正規表現