相关疑难解决方法(0)

我想强调(应用css)某个文本范围,由其开始和结束位置表示.这比看起来更难以实现,因为文本中可能还有其他标记需要忽略.

例:

<div>abcd<em>efg</em>hij</div>

highlight(2, 6)需要突出显示"cdef"不删除标签.

我已经尝试过使用TextRange对象,但没有成功.

提前致谢!

我使用鼠标在html页面(在firefox中打开)选择一些文本,并使用javascript函数,我创建/获取与所选文本对应的rangeobject.

 userSelection =window.getSelection(); 
 var rangeObject = getRangeObject(userSelection);

现在我想突出显示rangeobject下的所有文本.我这样做,

  var span = document.createElement("span");
  rangeObject.surroundContents(span);
  span.style.backgroundColor = "yellow";

好吧,这个工作正常,只有当rangeobject(起始点和端点)位于同一个textnode中时,它才会突出显示相应的text.Ex

    <p>In this case,the text selected will be highlighted properly,
       because the selected text lies under a single textnode</p>

但是如果rangeobject覆盖了多个textnode,那么它就不能正常工作,它只突出显示位于第一个textnode中的文本,Ex

 <p><h3>In this case</h3>, only the text inside the header(h3) 
  will be highlighted, not any text outside the header</p> 

任何想法我怎么做,所有在rangeobject下的文本,突出显示,独立于范围是在单个节点还是多个节点？谢谢....

我正在尝试制作一个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'});

}

有任何想法吗？

可能重复:
如何使用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 …

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

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

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

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

没有效果.

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