javascript - 将鼠标悬停在字符串上并更新预览

Question

编织: http://kodeweave.sourceforge.net/editor/#3d4399e2bde4c474186bd1c730539334

我在这里使用两个字符串(图像和颜色)

<div class="stuff">
  #0af
  http://cdn1.theodysseyonline.com/files/2015/11/14/6358312506953272101532239493_l-Baby-bear.jpg
</div>

Color values and images change depending on user input.

这个问题只是关于显示图像。如I already got color values working .

我正在使用以下正则表达式来检查字符串是否包含图像...

var image = /(http(s?):)|([/|.|\w|\s])*\.(?:jpg|gif|png)/g;

我想弄清楚的是..

• 如果我将鼠标悬停在链接到图像的网址上，如何使用 RegEx 在 .preview 中显示该图像(作为图像标记) .

// Handles Preview Position
$(document).on('ready mousemove', function(e) {
  if (e.pageX >= $(window).width() - 100) { 
    if (e.pageY <= $(window).height() - 100) { 
      $('.preview').css({
        'top' : e.pageY,
        'left' : e.pageX - 134
      })
    } else { 
      $('.preview').css({
        'top' : e.pageY - 100,
        'left' : e.pageX - 134
      })
    }
  } else if (e.pageX >= 60) { 
    if (e.pageY <= $(window).height() - 100) { 
      $('.preview').css({
        'top' : e.pageY,
        'left' : e.pageX - 64
      })
    } else { 
      $('.preview').css({
        'top' : e.pageY - 100,
        'left' : e.pageX - 64
      })
    }
  } else if (e.pageX <= 60) { 
    if (e.pageY <= $(window).height() - 100) { 
      $('.preview').css({
        'top' : e.pageY,
        'left' : e.pageX
      })
    } else { 
      $('.preview').css({
        'top' : e.pageY - 100,
        'left' : e.pageX
      })
    }
  }
})
// Add Preview
$('body').append('<div class="preview"></div>');

// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  mode: "text/css",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  dragDrop: true,
  lint: true,
  gutters: ["CodeMirror-lint-markers", "CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})

$('.CodeMirror-line').on('mouseover', function() {
  var hsl = /hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)/g;
  var rgb = /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)/g;
  var hex = /#[a-fA-F0-9]{3,6}/g;
  var colors = /hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)|rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)|#[a-fA-F0-9]{3,6}/g;
  var image = /(http(s?):)|([/|.|\w|\s])*\.(?:jpg|gif|png)/g;
  if (!this.textContent.match(colors) == "") {
  	$('.preview').css('visibility', 'visible');
  	$('.preview').empty().html( $('<div/>').addClass('color').css('background', this.textContent.match(colors)) )
  } else if (!this.textContent.match(image) == "") {
  	$('.preview').css('visibility', 'visible');
  	$('.preview').empty().html('<img src="'+ this.textContent.match(image) + '">')
  } else {
    $('.preview').empty().css('visibility', 'hidden');
  }
})

.CodeMirror {
  float: left;
  width: 100%;
  height: auto;
}

.preview {
  position: absolute;
  margin: 6px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.72);
  z-index: 9999;
  visibility: hidden;
}
.color {
  width: 80px;
}
.preview img, .color {
  height: 80px;
}

<link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.0.0/normalize.css">
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/addon/fold/foldgutter.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/addon/fold/comment-fold.js"></script>

<textarea id="code">.CodeMirror {
  float: left;
  width: 50%;
  border: 1px solid #2e8f2e;
  background: url('http://cdn1.theodysseyonline.com/files/2015/11/14/6358312506953272101532239493_l-Baby-bear.jpg');
}

iframe {
  width: 49%;
  float: left;
  height: 300px;
  color: hsl(232,100%,46%);
  border: 1px solid rgb(191, 92, 209);
  border-left: 0;
}</textarea>

Answer 1

编织: http://kodeweave.sourceforge.net/editor/#f5643481378a470cd08ea0d848319883

我认为有一种更干净、更准确的方法来做到这一点，但这是我怪诞的解决方案。

我使用 var image 来检查字符串是否是有效的图像。
然后我使用 var addimage 添加字符串 url。

var image = /(http(s?):)|([/|.|\w|\s])*\.(?:jpg|gif|png)/g;
var addimage = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}(\.[a-z]{2,6}|:[0-9]{3,4})\b([-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)/g;

然后使用 mouseover事件。我查找该字符串，如果它与变量匹配，则显示它，如果不匹配，则显示它。

$('.CodeMirror-line').on('mouseover', function() {
  var image = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}(\.[a-z]{2,6}|:[0-9]{3,4})\b([-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)/g;
  if (!this.textContent.match(image) == "") {
    $('.preview').css('visibility', 'visible');
    $('.preview').empty().html('<img src="'+ this.textContent.match(image) +'">')
  } else {
    $('.preview').empty().css('visibility', 'hidden');
  }
})

// Handles Preview Position
$(document).on('ready mousemove', function(e) {
  if (e.pageX >= $(window).width() - 100) { 
    if (e.pageY <= $(window).height() - 100) { 
      $('.preview').css({
        'top' : e.pageY,
        'left' : e.pageX - 134
      })
    } else { 
      $('.preview').css({
        'top' : e.pageY - 100,
        'left' : e.pageX - 134
      })
    }
  } else if (e.pageX >= 60) { 
    if (e.pageY <= $(window).height() - 100) { 
      $('.preview').css({
        'top' : e.pageY,
        'left' : e.pageX - 64
      })
    } else { 
      $('.preview').css({
        'top' : e.pageY - 100,
        'left' : e.pageX - 64
      })
    }
  } else if (e.pageX <= 60) { 
    if (e.pageY <= $(window).height() - 100) { 
      $('.preview').css({
        'top' : e.pageY,
        'left' : e.pageX
      })
    } else { 
      $('.preview').css({
        'top' : e.pageY - 100,
        'left' : e.pageX
      })
    }
  }
})
// Add Preview
$('body').append('<div class="preview"></div>');

// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  mode: "text/css",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  dragDrop: true,
  lint: true,
  gutters: ["CodeMirror-lint-markers", "CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})

$('.CodeMirror-line').on('mouseover', function() {
  var hsl = /hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)/g;
  var rgb = /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)/g;
  var hex = /#[a-fA-F0-9]{3,6}/g;
  var colors = /hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)|rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)|#[a-fA-F0-9]{3,6}/g;
  var image = /(http(s?):)|([/|.|\w|\s])*\.(?:jpg|gif|png)/g;
  var addimage = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}(\.[a-z]{2,6}|:[0-9]{3,4})\b([-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)/g;
  if (!this.textContent.match(colors) == "") {
  	$('.preview').css('visibility', 'visible');
  	$('.preview').empty().html( $('<div/>').addClass('color').css('background', this.textContent.match(colors)) )
  } else if (!this.textContent.match(image) == "") {
  	$('.preview').css('visibility', 'visible');
  	$('.preview').empty().html('<img src="'+ this.textContent.match(addimage) +'">')
  } else {
    $('.preview').empty().css('visibility', 'hidden');
  }
})

.CodeMirror {
  float: left;
  width: 100%;
  height: auto;
}

.preview {
  position: absolute;
  margin: 6px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.72);
  z-index: 9999;
  visibility: hidden;
}
.color {
  width: 80px;
}
.preview img, .color {
  height: 80px;
}

<link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.0.0/normalize.css">
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/addon/fold/foldgutter.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/addon/fold/comment-fold.js"></script>

<textarea id="code">.CodeMirror {
  float: left;
  width: 50%;
  border: 1px solid #2e8f2e;
  background: url('http://cdn1.theodysseyonline.com/files/2015/11/14/6358312506953272101532239493_l-Baby-bear.jpg');
}

iframe {
  width: 49%;
  float: left;
  height: 300px;
  color: hsl(232,100%,46%);
  border: 1px solid rgb(191, 92, 209);
  border-left: 0;
}</textarea>