替换所选文本 - HTML / JavaScript [英] Replacing selected text - 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屋!