JS 替换选中的文字

nutchcake 2014-05-07 04:21:50

先选中一段文字，然后，点击一个按钮后，就用a标签把该段文字包裹起来。。

...全文

1026 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

才能换薪 2016-05-23

打赏
举报

引用 4 楼 showbo 的回复:

<script>
    function surroundContent() {
        var r;
        if (document.selection) {
            r = document.selection.createRange();
            if (r.text != '') r.pasteHTML('<a href="#">' + r.text + '</a>')
        }
        else if (window.getSelection) {
            r = window.getSelection();
            if (r.rangeCount > 0) {
                r = r.getRangeAt(0);
                var a = document.createElement('a');
                a.href = '#';
                r.surroundContents(a)
                r.collapse(false);
            }
        }
    }
</script>
</head>

其实，现实生活中，“常回家看看”的缺位，“宅居”自己房间的常态，沟通话题的日渐狭窄，这些无一不是“哦”的变种。打破这样的僵局，做子女的必须主动向父母搭腔。
　　要知道，跟爸妈多说几句话，既是心的陪伴，也是爱的嵌入。相反，回复越“简洁”，给亲情注水就越多。儿大可以不由娘，父亲的支柱地位可以被取代，但他们的尊严和情感不能被忽视。他们，可是那即便老得忘了你名字，也会记得你爱吃饺子的人

<input type="button"  id="Button1" value="替换选中文字" onclick="surroundContent()"/>

厉害

斯洛文尼亚旅游 2014-05-07

打赏
举报

<script>
    function surroundContent() {
        var r;
        if (document.selection) {
            r = document.selection.createRange();
            if (r.text != '') r.pasteHTML('<a href="#">' + r.text + '</a>')
        }
        else if (window.getSelection) {
            r = window.getSelection();
            if (r.rangeCount > 0) {
                r = r.getRangeAt(0);
                var a = document.createElement('a');
                a.href = '#';
                r.surroundContents(a)
                r.collapse(false);
            }
        }
    }
</script>
</head>

其实，现实生活中，“常回家看看”的缺位，“宅居”自己房间的常态，沟通话题的日渐狭窄，这些无一不是“哦”的变种。打破这样的僵局，做子女的必须主动向父母搭腔。
　　要知道，跟爸妈多说几句话，既是心的陪伴，也是爱的嵌入。相反，回复越“简洁”，给亲情注水就越多。儿大可以不由娘，父亲的支柱地位可以被取代，但他们的尊严和情感不能被忽视。他们，可是那即便老得忘了你名字，也会记得你爱吃饺子的人

<input type="button"  id="Button1" value="替换选中文字" onclick="surroundContent()"/>

不想离开水的鱼 2014-05-07

打赏
举报

引用 1 楼 Return_false 的回复:

<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){
	var oBox=document.getElementById('box');
	var oBtn=document.getElementById('btn');
	oBtn.onclick=function(){
		var selectT=unescape(getSelectText()); 
		oBox.innerHTML=oBox.innerHTML.replace(selectT,'<a href="#">'+selectT+'</a>');
	}
}
function getSelectText(){
    var txt = null;
    if (window.getSelection){  // mozilla FF
        txt = window.getSelection();
       }
    else if (document.getSelection){
        txt = document.getSelection();
        }
    else if (document.selection){  //IE
        txt = document.selection.createRange().text;
        }
    return txt;
    }
</script>
</head>

<body>
<div class="box" id="box">
其实，现实生活中，“常回家看看”的缺位，“宅居”自己房间的常态，沟通话题的日渐狭窄，这些无一不是“哦”的变种。打破这样的僵局，做子女的必须主动向父母搭腔。
　　要知道，跟爸妈多说几句话，既是心的陪伴，也是爱的嵌入。相反，回复越“简洁”，给亲情注水就越多。儿大可以不由娘，父亲的支柱地位可以被取代，但他们的尊严和情感不能被忽视。他们，可是那即便老得忘了你名字，也会记得你爱吃饺子的人
</div>
<input type="button"  id="btn" value="替换选中文字"/>
</body>
</html>

你这个有问题，替换那个地方，应该是在选中的位置替换，不应该把选中文字作为替换项

人生难得一只鸡 2014-05-07

打赏
举报

<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){
	var oBox=document.getElementById('box');
	var oBtn=document.getElementById('btn');
	oBtn.onclick=function(){
		var selectT=unescape(getSelectText()); 
		oBox.innerHTML=oBox.innerHTML.replace(selectT,'<a href="#">'+selectT+'</a>');
	}
}
function getSelectText(){
    var txt = null;
    if (window.getSelection){  // mozilla FF
        txt = window.getSelection();
       }
    else if (document.getSelection){
        txt = document.getSelection();
        }
    else if (document.selection){  //IE
        txt = document.selection.createRange().text;
        }
    return txt;
    }
</script>
</head>

<body>
<div class="box" id="box">
其实，现实生活中，“常回家看看”的缺位，“宅居”自己房间的常态，沟通话题的日渐狭窄，这些无一不是“哦”的变种。打破这样的僵局，做子女的必须主动向父母搭腔。
　　要知道，跟爸妈多说几句话，既是心的陪伴，也是爱的嵌入。相反，回复越“简洁”，给亲情注水就越多。儿大可以不由娘，父亲的支柱地位可以被取代，但他们的尊严和情感不能被忽视。他们，可是那即便老得忘了你名字，也会记得你爱吃饺子的人
</div>
<input type="button"  id="btn" value="替换选中文字"/>
</body>
</html>