正则获取img的src和其他属性

var reg = /<img src="(.*?)" dataUrl="(.*?)">/ig;
var needHtml = html.replace(reg, '$2')

div编辑器上传图片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Language" content="zh-cn" />

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>DIV可编辑框鼠标光标处插入图片或者文字。</title>

		<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>

		<script type="text/javascript">
			/**
			 * 自定义编辑器
			 * @param {Object} id      编辑区
			 * @param {Object} control 操作区
			 */
			function insertImg(id,control){
				this.bigBox  = document.getElementById(id);
				this.handles = document.getElementById(control);
				this.handle  = this.handles.children[0];
				this.gethtml = this.handles.children[1];
				this.init();
			}
			insertImg.prototype = {
				init:function(){

					this.edit(); //编辑操作
					this.getResult(); //编辑操作
					
				},
				pasteHandler:function() {
					var that = this;
					/**
					 * 监控粘贴(ctrl+v),粘贴过来的替换多余的html代码，只保留<br>
					 */
					setTimeout(function() {
						
						var content = that.innerHTML;
						valiHTML = ["br"];
						content = content.replace(/_moz_dirty=""/gi, "").replace(/\[/g, "[[-").replace(/\]/g, "-]]").replace(/<\/ ?tr[^>]*>/gi, "[br]").replace(/<\/ ?td[^>]*>/gi, "  ").replace(/<(ul|dl|ol)[^>]*>/gi, "[br]").replace(/<(li|dd)[^>]*>/gi, "[br]").replace(/<p [^>]*>/gi, "[br]").replace(new RegExp("<(/?(?:" + valiHTML.join("|") + ")[^>]*)>", "gi"), "[$1]").replace(new RegExp('<span([^>]*class="?at"?[^>]*)>', "gi"), "[span$1]").replace(/<[^>]*>/g, "").replace(/\[\[\-/g, "[").replace(/\-\]\]/g, "]").replace(new RegExp("\\[(/?(?:" + valiHTML.join("|") + "|img|span)[^\\]]*)\\]", "gi"), "<$1>");
	
						if(!$.browser.mozilla) {
	
							content = content.replace(/\r?\n/gi, "<br>");
	
						}
	
						that.innerHTML = content;
					}, 1)
				},
				_insertimg:function(str) {
					/*
					 * 锁定编辑器中鼠标光标位置。
					 */
					var selection = window.getSelection ? window.getSelection() : document.selection;

					var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
	
					if(!window.getSelection) {
	
						this.bigBox.focus();
	
						var selection = window.getSelection ? window.getSelection() : document.selection;
	
						var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
	
						range.pasteHTML(str);
	
						range.collapse(false);
	
						range.select();
	
					} else {
	
						this.bigBox.focus();
	
						range.collapse(false);
	
						var hasR = range.createContextualFragment(str);
	
						var hasR_lastChild = hasR.lastChild;
	
						while(hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
	
							var e = hasR_lastChild;
	
							hasR_lastChild = hasR_lastChild.previousSibling;
	
							hasR.removeChild(e)
	
						}
	
						range.insertNode(hasR);
	
						if(hasR_lastChild) {
	
							range.setEndAfter(hasR_lastChild);
	
							range.setStartAfter(hasR_lastChild)
	
						}
	
						selection.removeAllRanges();
	
						selection.addRange(range)
	
					}

				},
				enterkey:function() {
					/*
					 * 监控按enter键和空格键，如果按了enter键，则取消原事件，用<BR/ >代替。
					 */
					e = event.keyCode;
					
					if(e == 13 || e == 32) {
	
						var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
	
						event.returnValue = false; // 取消此事件的默认操作 
	
						if(document.selection && document.selection.createRange) {
	
							var myRange = document.selection.createRange();
	
							myRange.pasteHTML('<br />');
	
						} else if(window.getSelection) {
	
							var selection = window.getSelection();
	
							var range = window.getSelection().getRangeAt(0);
	
							range.deleteContents();
	
							var newP = document.createElement('br');
	
							range.insertNode(newP);
	
						}
	
					}
				},
				edit:function() {
					//复制粘贴以及回车换行操作
					this.bigBox.onkeydown = this.enterkey;
					this.bigBox.onpaste = this.pasteHandler;
					//插入图片
					var that = this;
					this.handle.onclick = function() {
						that.bigBox.focus();
						var img_url = "<img src='./img/l.jpg' dataUrl='./A'>";
						that._insertimg(img_url);
					}
				},
				getResult:function() {
					//获取需要的结果
					var that = this;
					this.gethtml.onclick = function() {
						$(that.bigBox).find('br').remove(); //去除br
						var html = $.trim(that.bigBox.innerHTML);
						//正则修改img为自己想要的格式
						var reg = /<img src="(.*?)" dataUrl="(.*?)">/ig;
						//需要提交的内容
						var needHtml = html.replace(reg, '##@$2@##')
						
					}
				}
			}

		</script>

		<style type="text/css">
			.editbox {
				width: 400px;
				height: 200px;
				border: 1px solid #000;
				overflow-x: hidden;
				overflow-y: auto;
				outline: none;
			}
			.imgbox{
				width: 100px;
			}
			.editbox img {
				margin: 0 3px;
				width: 100px;
				display: inline;
			}
		</style>

	</head>

	<body>

		<div id="testdiv" contenteditable="true" class="editbox">可以在任意文字后面插入图片或者文字哦！</div>

		<div id="handle">
			<a href="javascript:void(0)" class="imgbox">插入</a>
			<div class="getText">
				获取文本
			</div>
		</div>
		
		
		
		<script type="text/javascript">
			$(function() {
				/**
				 * 初始化 insertImg
				 */
				var insertImgs = new insertImg('testdiv','handle');

			})
		</script>
	</body>

</html>

正则获取img的src和其他属性

猜你喜欢