html鼠标选择文字颜色,js实现鼠标选中文本改变选中区域颜色以及给选中区域加上html标签...

使用JavaScript实现HTML文本选择颜色和添加标签功能

最新推荐文章于 2022-11-12 22:35:00 发布

转载最新推荐文章于 2022-11-12 22:35:00 发布 · 1k 阅读

文章标签：

#html鼠标选择文字颜色

这篇博客展示了如何使用JavaScript监听鼠标松开事件，获取选中文本，并改变选中区域的颜色。通过分析选中范围，将选中文本前后的内容与中间选中的部分分离，再结合HTML标签进行处理，实现对选中文本的高亮和添加HTML标记。文中提供两个示例代码段，分别处理单个和多个子节点的情况。

这个demo是看了dialog flow 的intent模块下面的Training phrases 得到的心得，实现的一个简单的选中区域实现的效果，不过这里就没写选中之后会弹出数据了。直接上demo：

第一个：

Field selection demo

#trainPhase {

border: 1px solid #ddd;

padding: 10px;

}

div test body. Please input content.

(function() {

$('#trainPhase').on('mouseup', function(event) {

var selection_text = window.getSelection().toString();

if(selection_text) {

var childNodes = $(event.currentTarget)[0].childNodes;

var range = window.getSelection().getRangeAt(0);

var startOffset = range.startOffset;

var endOffset = range.endOffset;

if (childNodes.length == 1){

var nodeText = childNodes[0].textContent.trim();

var prefix = nodeText.substring(0, startOffset);

var middle = '' + nodeText.substring(startOffset, endOffset) + "";

var suffix = nodeText.substring(endOffset, nodeText.length);

$(event.currentTarget)[0].innerHTML = prefix + middle + suffix;

}

if (childNodes.length > 1){

if(range.startContainer == range.endContainer){

for(var idx in childNodes){

if (childNodes[idx] == range.startContainer ||

childNodes[idx] == range.startContainer.parentNode){

var nodeText = childNodes[idx].textContent;

var prefix = nodeText.substring(0, startOffset);

var middle = '' + nodeText.substring(startOffset, endOffset) + "";

var suffix = nodeText.substring(endOffset, nodeText.length);

$(childNodes[idx]).replaceWith( prefix + middle + suffix);

}

}else{

//多个span合并

var isStart = false;

var repalce_span = ""

for(var idx in childNodes){

if (childNodes[idx] == range.startContainer || childNodes[idx] == range.startContainer.parentNode){

isStart = true;

var nodeText = childNodes[idx].textContent;

var prefix = nodeText.substring(0, startOffset);

var suffix = '' + nodeText.substring(startOffset, nodeText.length);

repalce_span = prefix + suffix;

childNodes[idx].replaceWith("")

}else if(childNodes[idx] == range.endContainer ||

childNodes[idx] == range.endContainer.parentNode){

isStart = false;

var nodeText = childNodes[idx].textContent;

var prefix = nodeText.substring(0, endOffset) + "";

var suffix = nodeText.substring(endOffset, nodeText.length);

repalce_span += prefix + suffix

$(childNodes[idx]).replaceWith(repalce_span);

break;

}else{

if(isStart){

repalce_span += childNodes[idx].textContent

childNodes[idx].replaceWith("")

}

});

}());

第二个：

Field selection demo

#trainPhase {

border: 1px solid #ddd;

padding: 10px;

}

div test body. Please input content.

replace selection

(function() {

var $elem;

$('#trainPhase').focus(function(){

$elem = $(this);

});

// $('#get').on('click', function() {

// alert($elem.fieldSelection().text);

// window.console && console.log($elem.fieldSelection());

// });

$('#replace').on('click', function() {

var selection_text = window.getSelection().toString();

var childNodes = document.getElementById("trainPhase").childNodes;

var range = window.getSelection().getRangeAt(0);

var startOffset = range.startOffset;

var endOffset = range.endOffset;

if (childNodes.length == 1){

var nodeText = childNodes[0].textContent.trim();

var prefix = nodeText.substring(0, startOffset);

var middle = '' + nodeText.substring(startOffset, endOffset) + "";

var suffix = nodeText.substring(endOffset, nodeText.length);

document.getElementById("trainPhase").innerHTML = prefix + middle + suffix;

}

if (childNodes.length > 1){

if(range.startContainer == range.endContainer){

for(var idx in childNodes){

if (childNodes[idx] == range.startContainer ||

childNodes[idx] == range.startContainer.parentNode){

var nodeText = childNodes[idx].textContent;

var prefix = nodeText.substring(0, startOffset);

var middle = '' + nodeText.substring(startOffset, endOffset) + "";

var suffix = nodeText.substring(endOffset, nodeText.length);

$(childNodes[idx]).replaceWith( prefix + middle + suffix);

}

}else{

//多个span合并

var isStart = false;

var repalce_span = ""

for(var idx in childNodes){

if (childNodes[idx] == range.startContainer || childNodes[idx] == range.startContainer.parentNode){

isStart = true;

var nodeText = childNodes[idx].textContent;

var prefix = nodeText.substring(0, startOffset);

var suffix = '' + nodeText.substring(startOffset, nodeText.length);

repalce_span = prefix + suffix;

childNodes[idx].replaceWith("")

}else if(childNodes[idx] == range.endContainer ||

childNodes[idx] == range.endContainer.parentNode){

isStart = false;

var nodeText = childNodes[idx].textContent;

var prefix = nodeText.substring(0, endOffset) + "";

var suffix = nodeText.substring(endOffset, nodeText.length);

repalce_span += prefix + suffix

$(childNodes[idx]).replaceWith(repalce_span);

break;

}else{

if(isStart){

repalce_span += childNodes[idx].textContent

childNodes[idx].replaceWith("")

}

});

}());