我想用span标记括起“ uter t”这个词,其中包含背景css以突出显示。
我可以在$('div').text()
的基础上使用单词的起始索引和结束索引选择完整的单词。
但是当用span标记包含这个选定的单词时,我无法突出显示它,因为这个单词包含"uter</strong>t"
,并且它无法围绕它包围。
有什么建议我需要做些什么来强调这些半粗体,斜体,下划线的单词?
$scope.getTextNodesIn = function (node) {
var textNodes = [];
if (node.nodeType == 3) {
textNodes.push(node);
} else {
var children = node.childNodes;
for (var i = 0, len = children.length; i < len; ++i) {
textNodes.push.apply(textNodes, $scope.getTextNodesIn(children[i]));
}
}
return textNodes;
}
$scope.setSelectionRange = function(el, start, end) {
if (document.createRange && window.getSelection) {
var range = document.createRange();
range.selectNodeContents(el);
var textNodes = $scope.getTextNodesIn(el);
var foundStart = false;
var charCount = 0, endCharCount;
for (var i = 0, textNode; textNode = textNodes[i++]; ) {
endCharCount = charCount + textNode.length;
if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i <= textNodes.length))) {
range.setStart(textNode, start - charCount);
foundStart = true;
}
if (foundStart && end <= endCharCount) {
range.setEnd(textNode, end - charCount);
break;
}
charCount = endCharCount;
}
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && document.body.createTextRange) {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(true);
textRange.moveEnd("character", end);
textRange.moveStart("character", start);
textRange.select();
}
}
$scope.makeEditableAndHighlight = function(colour) {
var content,span,sel;
sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
}
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
// Use HiliteColor since some browsers apply BackColor to the whole block
//document.designMode = "on";
/*if (!document.execCommand("HiliteColor", false, colour)) {
document.execCommand("backColor", false, colour);
}*/
var range = window.getSelection().getRangeAt(0);
if(range.commonAncestorContainer.toString() != '[object Text]')
{
if(typeof window.getSelection().anchorNode.parentElement != 'undefined')
var cloneContent = window.getSelection().focusNode.parentElement;
else
var cloneContent = window.getSelection().focusNode.parentNode;
span = document.createElement('SPAN');
span.className='startIndex-'+startIndex+' endIndex-'+endIndex+'';
span.style.background = 'pink';
span.innerHTML = range.toString();
//cloneContent.outerHTML.replace(range.toString(),span.outerHTML);
$(cloneContent).replaceWith(cloneContent.outerHTML.replace(range.toString(),span.outerHTML));
return;
}
else
{
content = $(content).text();
}
content = range.cloneContents();
range.deleteContents();
span = document.createElement('SPAN');
span.className='startIndex-'+startIndex+' endIndex-'+endIndex+'';
span.style.background = 'pink';
span.appendChild(content);
var htmlContent = span.innerHTML;
range.insertNode(span);
/*if(window.getSelection().focusNode.parentNode.style.backgroundColor == 'pink')
{
var parent_node = getOutterMostParent(window.getSelection().focusNode);
$(listId).addClass('startIndex-'+ parseInt(startIndex) +' endIndex-'+parseInt(endIndex));
}
document.designMode = "off";*/
sel.removeAllRanges();
//range.detach();
}
$scope.highlight = function(colour) {
var range, sel;
if (window.getSelection) {
// IE9 and non-IE
try {
//if (!document.execCommand("backColor", false, colour)) {
$scope.makeEditableAndHighlight(colour);
//}
} catch (ex) {
$scope.makeEditableAndHighlight(colour)
}
} else if (document.selection && document.selection.createRange) {
// IE <= 8 case
range = document.selection.createRange();
range.execCommand("backColor", false, colour);
}
}
$scope.selectAndHighlightRange=function(id, start, end) {
$scope.setSelectionRange(id, start, end);
$scope.highlight("pink");
}
答案 0 :(得分:0)
你可以使用1个div,里面有2个跨度,并且对2个跨度使用不同的css类。
并使用您想要实现的css规则
<div><span class="bolder">uter</span><span class="no-bolder">t</span></div>
在css部分:
span.bolder {
font-weight: bold;
}
span.bolder {
font-weight: bold;
background-color: yellow;
}
<div><span class="bolder">uter</span><span class="no-bolder">t</span></div>