各位Javascript达人，帮忙啊

hahanan1987 2010-09-07 03:40:13

<!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 runat="server">
<title>无标题页</title>
<script>
function ShowDiv()
{
var span = document.getElementById("s");
span.innerHTML = span.innerHTML.replace("<IMG src=\"shuqian.png\" tag=\"true\">", "")
var txt = document.selection.createRange();
txt.pasteHTML(txt.text + "<img src=\"shuqian.png\" tag=\"true\" />");
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span onmouseup="ShowDiv();" id="s">快使用双节棍狠狠哈嘿快使用双节棍狠狠哈嘿<br /> 习武之人切记仁者无敌是谁在练太极风声水起<br />快使用双节棍狠狠哈嘿快使用双节棍狠狠哈嘿<br /> 习武之人切记仁者无敌是谁在练太极风声水起</span>
<br /><br />
<span>sdasdadasdasdasdasdads</span>
</div>
</form>
</body>
</html>

目的是这样的
利用document.selection.createRange()在选中的字后面插入图片
不过在做这个事之前，需要把容器内的已有的相同图片清除，但是一旦用了
span.innerHTML = span.innerHTML.replace("<IMG src=\"shuqian.png\" tag=\"true\">", "")
就会导致document.selection.createRange()选取的文本有问题，变成整个容器了。不知道有没有办法解决
（如果测试的话替换代码里的Img的src要手动设置下加个http://....）

...全文

94 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

hahanan1987 2010-09-07

打赏
举报

恩，很不错的方法谢了

hoojo 2010-09-07

打赏
举报

[Quote=引用楼主 hahanan1987 的回复:]
<!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 runat="server">
<t……
[/Quote]

一段对刚才选择的html做了文本操作后，就会导致插入的图片跑到顶部

原因是innerHMTL赋值后，原来的html内容发生变化导致document.selection.createRange()不能获取

鼠标选择的内容。所以图片才跑到最前面了





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

<head runat="server">

  <title>无标题页</title>

  <script>

  function ShowDiv()

  {

  var span = document.getElementById("s"); 

  var imgStr = "<IMG src=\"http://avatar.profile.csdn.net/D/7/3/2_hahanan1987.jpg\" tag=\"true\">";  

  var txt = document.selection.createRange();

  var temp = "!#flag!" +txt.text+imgStr+"!flag#!";

  txt.pasteHTML(temp);

  var content = span.innerHTML;



  var ary = content.split(temp);



  content = ary[0].replace(imgStr, "") + temp + ary[1].replace(imgStr, "");

  span.innerHTML = content.replace("!#flag!", "").replace("!flag#!", "");  

  }

   

   

  </script>

</head>

<body>

  <form id="form1" runat="server">

  <div>

  <span onmouseup="ShowDiv();" id="s">快使用双节棍 狠狠哈嘿 快使用双节棍狠狠哈嘿<br /> 习武之人切记 仁者无敌 是谁在练太极风声水起<br />快使用双节棍 狠狠哈嘿 快使用双节棍狠狠哈嘿<br /> 习武之人切记 仁者无敌 是谁在练太极风声水起</span>

  <br /><br />

  <span>sdasdadasdasdasdasdads</span>

  </div>

  </form>

</body>

</html>