jquery获取突出显示文本的html并更改其样式 [英] jquery getting the html of highlighted text and changing its style
问题描述
看到这篇关于获取HTML的帖子从选定/突出显示的文本。它确实可以获取html。
Saw this post about getting the html from the selected/higlighted text. And it does work in getting the html.
function getSelectionHtml() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;
}
alert(getSelectionHtml());
但是,假设有这个html:
But, suppose there's this html:
<p>I am <span style="color:green;">green</span> and I have <span style="background-color:yellow;">yellow background<span>.</p>
现在如果突出显示绿色这个词,那么它只会得到单词
Now if the word green is highlighted, then it will just get the word
绿色
即使< span>标签
包围。但是如果选择的字符比绿色字更多(比如绿色字之前或之后的空格,就像这个绿色),它也会获得html标签,例如:
even if there's <span> tag
surrounded. But if selected more character than the word green (say the space before or after the word green like this " green"), it will get the html tag too, such as:
<span style="color:green;">green</span>
即使只突出显示绿色一词,是否可以获取HTML ?
Is it possible to get the html even if only the word "green" is highlighted?
最终我想要实现的是假设我想将突出显示的文本的颜色更改为蓝色,然后首先检查突出显示的文本是否有跨度。其次,该跨度是否具有颜色或背景,甚至两种造型。最后对突出显示的文本进行更改。
Eventually what I want to achieve is suppose I want to change the color of the highlighted text to blue color, then first check if the highlighted text has a span. Secondly whether that span has color or background or even both styling. And lastly do the changes to the highlighted text.
$('#change_blue').on("click", function() {
var sel = getSelectionHtml();
/*var span = sel.find("<span").html();*/
alert(sel);
if (sel.match("<span style=")) {
console.log('has span tag');
if (sel.indexOf("background") > -1 && sel.indexOf("color") > -1 ) {
console.log('has both background and color')
// change color to blue
}
else if (sel.match("color")) {
console.log('only color')
// change color to blue
}
else {
console.log('only background')
// add blue color
}
}
else {
console.log('no span tag');
}
});
如何获取突出显示文本的html并相应更改?如果你能帮助我,那真的意味着很多。谢谢。
How can I get the html of a highlighted text and change it accordingly? It would really mean a lot if you could help me through. Thank you.
推荐答案
这样做,
function getSelectionHtml() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount, range; i < len; ++i) {
range = sel.getRangeAt(i);
if (range.startContainer === range.endContainer
&& range.startContainer.nodeType === Node.TEXT_NODE
&& range.startOffset === 0
&& range.endOffset === range.startContainer.length) {
range.selectNode(range.startContainer.parentElement);
}
container.appendChild(range.cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;
}
这篇关于jquery获取突出显示文本的html并更改其样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!