您的位置：首页 > Web前端 > JavaScript

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

2018-03-16 16:38 197 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： div编辑器 div编辑器插如图片 js正则匹配img 正则匹配img的src 光标插入图片

相关文章推荐

新的分享

章节导航