相关疑难解决方法(0)

是否有可能在网站的段落中获取突出显示的文本,例如使用jQuery？

你如何突出JavaScript中的文字？我试过http://jsfiddle.net/WdeTM/,但它不起作用.

<span id="foo" >bar</span>
document.getElementById("foo").focus();

我正在尝试制作一个javascript书签,它将充当荧光笔,在按下书签时将网页上所选文本的背景更改为黄色.

我正在使用以下代码来获取所选文本,并且它工作正常,返回正确的字符串

function getSelText() {
var SelText = '';
if (window.getSelection) {
    SelText = window.getSelection();
} else if (document.getSelection) {
    SelText = document.getSelection();
} else if (document.selection) {
    SelText = document.selection.createRange().text;
}
return SelText;

}

但是,当我创建一个类似的函数来使用jQuery更改所选文本的CSS时,它不起作用:

function highlightSelText() {
var SelText;
if (window.getSelection) {
    SelText = window.getSelection();
} else if (document.getSelection) {
    SelText = document.getSelection();
} else if (document.selection) {
    SelText = document.selection.createRange().text;
}
$(SelText).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});

}

有任何想法吗？

我有一个脚本可以更改已选择的文本的背景颜色.但是,当跨多个元素/标签选择文本时,我遇到了问题.

我得到的代码是:

var text = window.getSelection().getRangeAt(0);
var colour = document.createElement("hlight");
colour.style.backgroundColor = "Yellow";
text.surroundContents(colour);

输出的错误是:

Error: The boundary-points of a range does not meet specific requirements. =
NS_ERROR_DOM_RANGE_BAD_BOUNDARYPOINTS_ERR
Line: 7

我相信这与getRange()函数有关,虽然我不太清楚如何继续,因为我是javascript的初学者.

有没有其他方法可以复制我想要实现的目标？

非常感谢.

可能重复:
如何使用Javascript向html页面添加/删除CSS /颜色样式？

我对HTML和javascript有疑问.我得到了以下的paragrahe.

function add_span(){
     // ??
}

<input type="button" onclick="add_span()" value="add span"/>
<p> statement1, statement2, statement3 </p>

是否可以在用户之后得到以下结果

1. 用鼠标选择突出显示的文本
2. 单击按钮

例如

1. 突出'声明1'
2. 单击按钮

预期结果:

<input tupe="button" onclick="add_span()" value"add span"/>
<p> <span class="ABC">statement1,</span> statement2, statement3 </p>

// updated code in the add_span

    var selectedText;

    if (window.getSelection)
    {
        selectedText = window.getSelection();
    }
    else if (document.getSelection) // FireFox
    {
        selectedText = document.getSelection();
    }
    else if (document.selection)  // IE 6/7
    {
        selectedText = document.selection.createRange().text;
    }

    //create the DOM object
    var newSpan …

我想在所选文本周围插入自己的自定义标记和脚本.像这样的东西

var range = window.getSelection().getRangeAt(0);
var sel = window.getSelection();
range.setStart( sel.anchorNode, sel.anchorOffset );
range.setEnd(sel.focusNode,sel.focusOffset);

highlightSpan = document.createElement("abbr");
highlightSpan.setAttribute("style","background-color: yellow;");
highlightSpan.setAttribute("onmouseout","javascript:HideContentFade(\"deleteHighlight\");");
highlightSpan.setAttribute("onmouseover","javascript:ShowHighlighter(\"deleteHighlight\",\""+id_val+"\");");  
highlightSpan.appendChild(range.extractContents()); 
range.insertNode(highlightSpan);

这适用于正常情况,但如果我在不同段落中选择一些文本,extractContents API将验证返回的HTML并添加其他标记以使其成为有效的HTML.我想要选择的确切HTML,而不需要javascript做的额外验证.

有什么办法可以做到吗？我已经按照如何突出显示DOM Range对象的文本中提到的方式尝试了它？但事情是我想要用户特定的亮点,所以如果A添加了一些亮点B应该无法看到它.为此我准备好了我的后端代码.

是否有办法在 window.getSelection() 之后获取下一个字符？我需要检查所选文本后面的字符是否是空格...

编辑：谢谢您的回答！我基本上使用此链接 来突出显示文本，但希望将内容限制为完整的单词。我使用下面提出的解决方案（由史蒂文）作为起点；我认为以下应该有效：

sel = window.getSelection();
var text = sel.anchorNode.nodeValue;
var index = sel.baseOffset + sel.focusOffset-1;
var isSpace = text[index] === undefined;
if (isSpace) {
alert("space");
}

（在上面的链接中，我在 makeEditableAndHighlight 函数调用之后立即使用了此代码）。

我正在尝试为页面创建一个学习工具,允许用户选择页面上的任何文本并单击按钮.然后,此单击将使用黄色背景格式化所选文本.我可以在单个标签内部进行此工作,但如果选择范围跨越多个标签(例如,无序列表中的第一个LI以及第二个的一半),我将难以应用该样式.不幸的是,我不能在这里用一个跨度包装选择.

基本上,我想关联的影响contentEditable,并execCommand没有除了背景颜色应用到选定的文本与按钮的点击实际进行任何编辑的网页上.

我对jQuery解决方案持开放态度,并发现这个插件似乎简化了跨浏览器创建范围的能力,但我无法使用它来将任何格式应用于所选范围.我可以从控制台看到它正在接受选择,但使用类似的东西:

var selected = $().selectedText();
$(selected).css("background-color","yellow");

没有效果.

任何指导我正确方向的帮助将不胜感激.

如果我使用 execCommand 方法突出显示所选文本：

document.execCommand("HiliteColor", false, colour);

正如本页所建议的那样，然后我想返回并取消突出显示格式（即返回到突出显示某些文本之前的情况），我该怎么办？

我能够突出显示HTML页面上的文本(通过gtkmozembed呈现),如下所示.

    var range, sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) {
          range = sel.getRangeAt(0);
        }
        document.designMode = "on";
        if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
        }
        document.execCommand("HiliteColor", false, colour);
        document.designMode = "off";
   }  

好吧,它工作得很好.现在我正在尝试存储有关突出显示文本的信息(startNode,startOffset,endNode,endOffset),下次当我打开同一页面时,突出显示相同的文本.我能够成功存储信息并在同一页面打开时检索它们.我试图使用以下代码突出显示文本.

    var range = document.createRange();
    range.setStart(startNode, startOffset);
    range.setEnd(endNode, endOffset);

    document.designMode = "on";
    range.execCommand("HiliteColor", false, colour);
    document.designMode = "off";

但它并没有像我期待的那样发挥作用.任何人都可以帮助我达到要求吗？谢谢...

我使用JavaScript使用以下代码突出显示了所选文本:

var sel = window.getSelection();
if(!sel.isCollapsed) {
    var range = sel.getRangeAt(0);
    sel.removeAllRanges();
    document.designMode = "on";
    sel.addRange(range);
    document.execCommand("HiliteColor", false, "#ffffcc");
    sel.removeAllRanges();
    document.designMode = "off";
}

如何删除突出显示的颜色并恢复文本？

我正在做一些页面突出显示,并发现使用文本选择和添加跨度时最流行的例子是切换到designMode并运行execCommand

如何突出显示DOM Range对象的文本？

关于如何在创建后删除span标记没有后续内容.我看到了一些使用jquery和replaceWith的例子,但没有使用直接的javascript.