[英]Insert HTML tag to multiple selected text from different paragraph tags in html
我正在尝试为来自不同段落标签的多个选定文本添加新的HTML标签。 HTML代码段如下:
<div class="sampleContent">
<p>Hello</p>
<p>This one is</p>
<p>Sample Text</p>
</div>
因此,在上面的代码段中,我从第一个P标签中选择了“ llo”文本,从第二个P标签中选择了“ this is”文本,并从第三个P标签中选择了“ Sample”文本。 现在,在任何按钮选择上,都应将新创建的标签添加到所有选定的文本中,以便输出如下所示:
<div class="sampleContent">
<p>"He"<div id="1"> llo </div></p>
<p><div id="1"> This one is </div></p>
<p><div id="1"> Sample </div>Text</p>
</div>
那么,如何为所有选定的文本添加这个新创建的“ div”元素?
我试过下面的代码:
const wrapper = document.getElementsByClassName('sampleContent')[0];
wrapper.addEventListener('mouseout', event => {
const selection = window.getSelection();
if (selection.rangeCount) {
const replacement = document.createElement('div');
replacement .setAttribute( "id", "1" );
replacement.textContent = selection.toString();
const range = selection.getRangeAt(0);
range.deleteContents();
range.insertNode(replacement);
}
});
但是它给出的输出为:
<div class="sampleContent">
<p>"He"<div id="1"> llo
This one is
Sample
</div></p>
<p>Text</p>
</div>
这样可以解决您的问题。
var count=0;
const wrapper = document.getElementsByClassName('sampleContent')[0];
wrapper.addEventListener('mouseup', event => {
count++;
const original=event.target.textContent.toString();
const selection = window.getSelection();
if (selection.rangeCount) {
const replacement = document.createElement('div');
replacement .setAttribute( "id", count );
replacement.textContent = selection.toString();
const range = selection.getRangeAt(0);
var array=original.split("");
array.splice(range.startOffset,range.endOffset-range.startOffset)
var string=array.join("");
event.target.textContent=string;
range.deleteContents();
range.insertNode(replacement);
}
});
基本上我所做的是
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.