通过javascript在window.selection（）中查找html标记

我正在使用

window.selection（）

为一些文本着色。现在我需要给一个不包含

标签的选择上色

代码：

---

如何检查

window.getSelection（）

是否包含

标记？

这里有一个Jquery版本可以执行此操作

您可以使用.anchorNode属性并获取所选内容的父项，然后通过执行.prop（“标记名”）可以轻松获取父项的标记名

---

这将获得选择的父节点的标记名：

var selection = window.getSelection();
if (selection && selection.anchorNode.parentNode.tagName === "P") {
    // code
}

---

您可以使用

range.cloneContents（）

获取要处理的文档片段，并避免对DOM进行变异。然后对该文档片段运行简单的文档查询，如

querySelector（）

，以查找任何

p

标记：

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

if (docFragment.querySelector('p')) return;

var span = document.createElement('span');
span.className = 'colored';
range.surroundContents(span);

我还使用了

range.surroundContents（）

在

span

中包围范围的内容，因为这看起来就像您在这里要做的一切

这里有一个例子。任何包含

p

标记任何部分的选择都不会产生任何效果，而所有其他选择都会得到黄色高亮显示：

函数abc（）{
var range=window.getSelection（）.getRangeAt（0）；
var docFragment=range.cloneContents（）；
if（docFragment.querySelector（'p'）返回；
var span=document.createElement（'span'）；
span.className='colored'；
范围。周围内容物（跨度）；
}
window.onclick=abc

.colored{
背景：黄色；
}

p标记之外的内容
在p标签里面的东西

更多p标签之外的东西

CSS:：selection对您的案例不起作用吗？

var selection = window.getSelection();
if (selection && selection.anchorNode.parentNode.tagName === "P") {
    // code
}

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

if (docFragment.querySelector('p')) return;

var span = document.createElement('span');
span.className = 'colored';
range.surroundContents(span);