替换textarea的文本编辑框的实现，可现实文字输入与显示图片、表情

整理自网络

------------------------------------------------------------------------------------------

方法1：

通过textare添加子元素img，该方式只有IE支持

<textarea id="editor" >图片：</textarea>

<script type="text/javascript" >
var editor = document.getElementById('editor');
var img = document.createElement('img');
img.src = 'url';
editor.appendChild(img);

</script>

然后通过editor.innerHTML获取带标签的内容

方法2：

通过div的contentEditable=true属性，经测试
谷歌 火狐 IE opera都支持，但手机浏览器不支持

<div contentEditable="true" id="editor"  style="height:70px;border-style:solid; border-width:1px; border-color:#AEEEEE"></div>
<script type="text/javascript" >
var editor = document.getElementById('editor');
var img = document.createElement('img');
img.src = 'url';
editor.appendChild(img);

</script>

然后通过editor.innerHTML获取带标签的内容

方法3：

通过设置iframe的document.designMode为On可以让其可编辑，一般用在富文本编辑器组件中。pc端 手机端均可。

<iframe frameborder="1" id="editor" src="javascript:;" style="width:100%;">
<script type="text/javascript" >
$(document).ready(function(){
document.getElementById("editor").contentWindow.document.designMode="On";
})

var editor = document.getElementById('editor');
editor.contentWindow.focus();
editor.contentWindow.document.execCommand("insertHTML", false, "<img src='"+Url+"'></img>");
editor.contentWindow.document.getSelection().collapse();
</script>

execCommand会在当前光标处插入表情，插入之前调用focus，之后再调用collapse会紧接在表情后面获得焦点

通过document.getElementById('editor').contentWindow.document.body.innerHTML获取文本内容

-----------------------------------------------------------------------------------------------

RegExp构造函数第一个参数为正则表达式的文本内容,而第一个参数则为可选项标志.标志可以组合使用

•g （全文查找）

•i （忽略大小写）

•m （多行查找）