替换所选文本 - HTML / JavaScript [英] Replacing selected text - HTML / JavaScript

查看:65
本文介绍了替换所选文本 - HTML / JavaScript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

大家好,不确定是否有人可以帮助我。

我从div中选择(突出显示)文本,然后点击按钮我就大胆了。



该函数有效 - 它通过添加我的Span标签使文本粗体化,但是,

document.body.innerHTML.replace替换它找到的第一个实例而不是我的选择。如果我想在这个例子中第二个你好:



'hello,你好!' - 即使我选择了第二个问候,第一个问题就是变得大胆。



对此有何帮助?功能如下。



  JS: 
函数makeBold(){
var highlight = window.getSelection();

var span ='< span style =font-weight:bold;>'+ highlight +'< / span>';

document.body.innerHTML = document.body.innerHTML.replace(window.getSelection(),span);
}

HTML:
< input type =buttonvalue =Make BoldonClick =makeBold();>

解决方案

javascript string.replace方法实际上将RegExp作为它的第一个参数。没有指定它为'贪婪'它只会匹配第一个。

javascript中的普通正则表达式看起来像 / expression / g ,g代表贪心当你从一个字符串创建一个时,只需使用这样的RegExp构造函数:



  function  makeBold(){
var highlight = window .getSelection() ;

var span = ' < span style =font-weight:bold;>' + highlight + ' < /跨度>';

document .body.innerHTML = document .body.innerHTML.replace( new RegExp (突出显示,' g'),span);
}





编辑:现在我再次阅读了这个问题> _<

< br $> b $ b

<前lang =Javascript> 功能 makeBold(){

var span = ' < span style =font-权重:粗体;>' +突出显示+ ' < / span>' ;

var 已选中,范围;
if window .getSelection){
selected = 窗口 .getSelection();
if (selected.rangeCount){
range = selected.getRangeAt( 0 );
range.deleteContents();
range.insertNode( document .createTextNode(span));
}
} else if document .selection&& document .selection.createRange){
range = document .selection.createRange();
range.text = span;
}

}







EDIT2:现在是插入html的版本(我希望)



  function  getSelectionHtml() {
var sel,range,node;
if window .getSelection){
sel = 窗口 .getSelection();
if (sel.getRangeAt&& sel.rangeCount){
range = window .getSelection().getRangeAt( 0 );

var html = ' < span style =font-weight:bold;>' + range + ' < / span>'
range.deleteContents();

var el = document .createElement( div);
el.innerHTML = html;
var frag = document .createDocumentFragment(),node,lastNode;
while ((node = el.firstChild)){
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
}
} else if document .selection&& document .selection.createRange){
range = document .selection.createRange();
range.collapse( false );
range.pasteHTML(html);
}

}





现在我测试的这个:

https://jsfiddle.net/dKaJ3/1261/ [ ^ ]


Hi guys, not sure if anyone can help me.
I'm selecting(highlighting) text from a div and on the click of a button I'm making it bold.

The function works - it does make the text Bold by adding my Span tags, however,
the document.body.innerHTML.replace replaces the first instance it find and not my selection. If I want to the second hello in this example:

'hello, hello!' - even if I select the second hello, the first one is the one that will turn bold.

Any help with this? Function below.

JS:
function makeBold(){
	var highlight = window.getSelection();  
 
    var span = '<span style="font-weight:bold;">' + highlight + '</span>';

    document.body.innerHTML = document.body.innerHTML.replace(window.getSelection(), span);
}

HTML:
<input type="button" value="Make Bold" onClick="makeBold();"> 

解决方案

the javascript string.replace method actually takes a RegExp as it's first argument. Without specifying it as 'greedy' it will only match the first.
Ordinary regex in javascript would look like /expression/g, the g stands for greedy. As you are creating one from a string, just use the RegExp constructor like this:

function makeBold(){
	var highlight = window.getSelection();  
 
    var span = '<span style="font-weight:bold;">' + highlight + '</span>';
 
    document.body.innerHTML = document.body.innerHTML.replace(new RegExp(highlight , 'g'), span);
}



EDIT: now I have read the question again >_<


function makeBold(){
 
    var span = '<span style="font-weight:bold;">' + highlight + '</span>';

    var selected, range;
    if (window.getSelection) {
        selected= window.getSelection();
        if (selected.rangeCount) {
            range = selected.getRangeAt(0);
            range.deleteContents();
            range.insertNode(document.createTextNode(span));
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.text = span;
    }
 
}




EDIT2: and now the version that inserts html (i hope)

function getSelectionHtml() {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            
            var html = '<span style="font-weight:bold;">' + range + '</span>'
            range.deleteContents();
            
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(false);
        range.pasteHTML(html);
    }

}



Now this one I HAVE tested:
https://jsfiddle.net/dKaJ3/1261/[^]


这篇关于替换所选文本 - HTML / JavaScript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆